<div class="form-group" ng-if="firstname">
<label>First Name</label>
<input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name">
</div>
I am using above code. From that i am displaying a popover by clicking -info-sign glyphicon, i am using ng-if condition for show/hide instead of ng-show and ng-hide.My problem is when i use ng-if, popover is not working.But popover working in ng-hide condition and if i remove ng-if condition.My question is why popover not working in ng-if condition.
Gotcha! is, ng-if prevents DOM Element from being rendered, where as ng-show / ng-hide only changes display css-poperty
please refer first paragraph of angular documents for ng-if
Here is the example that demostrate how ng-if works
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.firstname = "Test Data";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-if="lastname"></div>
<div class="form-group" ng-if="firstname">
<label>First Name</label>
<input readonly type="text" class="form-control" id="first_name" ng-model="firstname" placeholder="First Name">
<label>Last Name</label>
<input readonly type="text" class="form-control" id="last_name" ng-model="lastname" placeholder="Last Name">
</div>
</div>
</body>
Related
I am working on a an angular2 project and i setted the value of html element (input) value to 0 as follows
<div class="form-group">
<label for="balance">Balance</label>
<input ngModel type="number" class="form-control" id="balance" placeholder="Balance" name="balance" value="0" required>
</div>
but when i run the project i get empty input.
any help?
<div class="form-group">
<label for="balance">Balance</label>
<input type="number" class="form-control" id="balance" placeholder="Balance" name="balance" [(ngModel)]="balance" required>
</div>
In your component constructor
balance:number;
constructor(){
this.balance = 0;
}
I want to display the value in the input text field using ng-bind directive.Can someone help me with this?
<div class="col-md-3">
<input class="form-control" disabled="disabled" value="ng-bind="type"">
</div>
Controller:
$scope.type = $scope.name[0].type_of_request;
I am trying to print this type in html page.I am not able to achieve that.Would someone help
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $timeout) {
$scope.type = "test";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<input class="form-control" disabled="disabled" ng-model="type">
</div>
</html>
ng-model works to be fine here, use it:
<html ng-app="myApp">
<div ng-controller="MyCtrl">
<input class="form-control" disabled="disabled" ng-model="type">
</div>
</html>
Or Use ng-value="type"
Check the below example:
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
<p>Hi <input type="text" value="{{name}}" /></p>
<p>Ahoy <input type="text" ng-value="name" /></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Use ng-model instead
If you need one way binding then
<input class="form-control" disabled="disabled" ng-model="::type">
else if you need two way binding
<input class="form-control" disabled="disabled" ng-model="type">
is there any way in angular 2 to pick name/id of input inside divs?
html:
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input type="text" name="firstName"/>
<input type="text" name="firstName"/>
</fieldset>
</div>
component:
function(str){this.var=str}
Not sure if template variables of child elements can be accessed
<div class="form-pages" (click)='function(input1.value, input2.value)'>//if it's possible then what should I put into function param?
<fieldset>
<input #input1 type="text" name="firstName"/>
<input #input2 type="text" name="firstName"/>
</fieldset>
</div>
If this doesn't work you can use
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input #myinput type="text" name="firstName"/>
<input #myinput type="text" name="firstName"/>
</fieldset>
</div>
#ViewChildren('input') inputs:QueryList<ElementRef>;
myFunction() {
let inputs = this.inputs.toArray();
console.log(inputs[0].value;
console.log(inputs[1].value;
}
Ok, I did it alone, thanks for previous answer, but for me it works well, It's needed to call $event.target.name method which will return name of clicked target.
<div (click)="setFocus($event.target.name)">
<input type='text' name='input1 />
<input type='text' name='input2 />
</div>
in componentsetFocus(str){this.var = str)
To turn off autocompletion in HTML I use:
<input type="text" name="foo" autocomplete="off" />
But this forces me to specify autocomplete="off" in every input field of my application. Is it possible to define autocomplete="off" in a CSS style?
You can just apply it to the form tag.
Using CSS you cannot achieve it. You can use client side script for example using Jquery
$('input').attr('autocomplete','off');
If you are not using Jquery or scripting language then you have to stick to HTML only.
As TeT Psy said you can apply it in form tag like
<form id="Form" runat="server" autocomplete="off">
you can disable all the autocompletes using form
<form id="Form1" runat="server" autocomplete="off">
U can use autocomplete="off" attribute on form tag. Like
<form id='test' autocomplete="off">
<input ...
<input ..
...
</form>
You can set it on form element if you wants to set autocomplete: off for all input elements of form. And if wants to make it on for some selected input you can apply autocomplete: on on that input.
.form {
padding: 30px 0;
width: 300px;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form action="#" class="form" autocomplete="on">
<div class="form-group">
First name:<input type="text" class="form-control" name="fname">
</div>
<div class="form-group">
Last name:<input type="text" class="form-control" name="lname" autocomplete="off">
</div>
<div class="form-group">
E-mail: <input type="email" class="form-control" name="email">
</div>
<input type="submit">
</form>
No you can't do this using css, but there are 2 other ways to do it:
1- you can apply it for the form
<form autocomplete="off" >
<input type="text" name="name">
<input type="text" name="mail">
</form>
2- you can handle it using js
var eles = document.getElementsByTagName('input');
for(i=0; i<eles.length; i++){
eles[i].setAttribute("autocomplete", "off");
}
https://jsfiddle.net/ng1mb77m/1/
Using bootstrap and can not set an input to hidden. It can be easily set to hidden with JS using
document.getElementById("inputCommentsBrand").style.visibility = "hidden";
but I would like it to be hidden by default.
<div class="form-group">
<label for="inputComments" class="col-sm-2 control-label">Markings</label>
<div class="col-sm-4">
<div><input hidden type="text" class="form-control" id="inputCommentsBrand" name="inputFlags[]" placeholder="Brand and Location: Sbar RH"></div>
<div><input type="text" class="form-control" id="inputCommentsEarTag" name="inputFlags[]" placeholder="Ear Tag Color & #: Green 165"></input></div>
</div>
</div>
Use <body onload="myFunction()"> to hide the field.
Below is the running example.
<script>
function myFunction() {
document.getElementById("inputCommentsBrand").style.visibility = "hidden";
}
</script>
<html>
<body onload="myFunction()">
<div class="form-group">
<label for="inputComments" class="col-sm-2 control-label">Markings</label>
<div class="col-sm-4">
<div><input type="text" class="form-control" id="inputCommentsBrand" name="inputFlags[]" placeholder="Brand and Location: Sbar RH"></div>
<div><input type="text" class="form-control" id="inputCommentsEarTag" name="inputFlags[]" placeholder="Ear Tag Color & #: Green 165"></input></div>
</div>
</div>
</body>
</html>
Instead of visibility:hidden
Use display:none