I am trying to display a field based on the value of a select in my angular app. It should be very simple: when newJob.country === 'Remote' I want my 'city' field to disappear:
HTML:
<body ng-app>
<div class="form-aside">
<label>Location</label>
<select ng-model="newJob.country" class="form-control">
<option>Remote</option>
<option>France</option>
<option>UK</option>
</select>
</div>
<div class="form-aside" ng-if="newJob.country !== 'Remote'">
<label>City</label>
</div>
</body>
For some reason it's not working. Here is the plunker: http://plnkr.co/edit/GcJNePs9zvkejnIATTiw?p=preview
How can i make this work?
Thanks
You need to define a valuefor each <option> tag.
Then you need to use ng-show with != to dynamically display your label or not.
Your plunker should work with this:
<body ng-app>
<div class="form-aside">
<label>Location</label>
<select ng-model="newJob.country" class="form-control">
<option value="remote">Remote</option>
<option value="france">France</option>
<option value="uk">UK</option>
</select>
</div>
<div class="form-aside" ng-show="newJob.country != 'remote'">
<label>City</label>
</div>
</body>
Plunker here : http://plnkr.co/edit/meqpbOVXrH4ANtQlxdoy?p=preview
Your version of Angular doesn't support ng-if.
Try :
<div class="form-aside" ng-show="newJob.country != 'Remote'">
Or update your version of Angularjs to 1.2.15, the last stable version.
Related
I am working on something which requires to come up with different options for different selections as list in forms.
for example:
If I select DR9 in System field, it has to show only 100,400,500 clients. same for QR9 - only 400 and 500.
But in my case, it's showing(100,400,500,400,500) repetitively.
Here is my code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<select>
<div ng-switch="myVar">
<div ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</div>
<div ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</div>
</div>
</select>
</form>
</div>
</body>
</html>
You cant apply ng-switch to a div with options instead add ng-switch to a div and apply ng-switch-when to select
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<div ng-switch="myVar">
<select ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
<select ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</select>
<select ng-switch-default>
<option>100</option>
<option>400</option>
<option>500</option>
</select>
</div>
</form>
</div>
</body>
</html>
The template can be simplified by using the ng-options directive:
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.myVar = "PR3";
$scope.otherOptions = otherOptions("PR3");
$scope.updateOtherOptions = function(myVar) {
$scope.otherOptions = otherOptions(myVar);
};
function otherOptions(myVar) {
switch (myVar) {
case "DR9": return [100,400,500];
case "QR9": return [400,500];
default: return [100,400,500];
};
};
})
<!DOCTYPE html>
<html>
<script src="//unpkg.com/angular/angular.js"></script>
<body>
<div ng-app="app" ng-controller="ctrl">
Password Reset
<form>
<br>
<label>System:</label>
<select ng-model="myVar" ng-change="updateOtherOptions(myVar)">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br>
Client options={{otherOptions}}
<br>
<label>Client:</label>
<select ng-model="otherSel" ng-options="sel for sel in otherOptions">
<option value="">Select...</option>
</select>
</form>
</body>
</html>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
When an item in the <select> menu is selected, the array element or object property represented by the selected option will be bound to the model identified by the ngModel directive.
Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.
For more information, see
AngularJS ng-options Directive API Reference
AngularJS API Reference - Using select with ngOptions and setting a default value
AngularJS ng-change Directive API Reference
I am trying to add an input box to the DOM based on the user selection:
option1 other option 3 otherwise remove input box from dom, how can do it, i tried bellow code but it is not working?
html--
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select> <p ng-if="myDropDown=='two' || ans=='three'">
<input type="text" ng-model="fname" name="fname" />
</p>
jsFiddle-->http://jsfiddle.net/EZbfM/717/
The reason ng-if is behaving unexpectedly is because you seem to have referenced an ancient version of AngularJS (1.0.2). If you update it to a more recent version, ng-if will work as expected.
See the link here for the issue related to the evaluation issue of ng-if: https://github.com/angular/angular.js/pull/4005
Do you want to show it when the dropdown is on one or on three, otherwise not?
change
<input ng-if="myDropDown=='two'" type="text">
to
<input ng-hide="myDropDown=='two'" type="text">
It will always render then, but only show if the option chosen is one or three
If I understand well, you are trying to display an element based on myDropDown value. You can write complex expressions as && or || in ng-show with the following synthax:
<div ng-show="myDropDown == 'two' || myDropDown == 'three'">
<!-- Will be displayed only when you select 'two' or 'three' -->
<input type="text" ng-model="fname"/>
</div>
Fiddle with ng-show
Fiddle with ng-if
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope',function($scope) {
}]);
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<p ng-if="myDropDown=='two' || myDropDown=='three'">
<input type="text" ng-model="fname" name="fname" />
</p>
</div>
Here is working fine..
var app = angular.module('exApp', []);
app.controller('ctrl', function($scope){
$scope.myDropDown = "one";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<div>
<select data-ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<p>
<input ng-model="comment" ng-if="myDropDown != 'two'" type="text"> </p>
</div>
</body>
In my AngularJS web application,
Plunker : https://plnkr.co/edit/x9uIx5Inkxxt3fqttkkK?p=preview
One of my drop down (First) is not retaining the selected value.
The html code fragment is below.
I know it is something to do with the mapping ng-model="entityPropertyType.propertyId"
The entityPropertyType is a iterated value from the list.
HTML
<div class="form-group" ng-repeat="entityPropertyType in advancedSearch.entityPropertyTypes" >
<label class="control-label col-md-1">Business Card</label>
<div class="col-md-2">
<select class="form-control" ng-model="entityPropertyType.propertyId"
ng-change="businessCardSelected($index, entityPropertyType.propertyId)" >
<option value="">Please select</option>
<option ng-repeat="property in businessCards" value="{{property.propertyId}}">{{property.propertyLabel}}</option>
</select>
</div>
</div>
You should never use ngRepeat to render select options. Use ngOptions directive:
<select class="form-control"
ng-options="property.propertyId as property.propertyLabel for property in businessCards"
ng-model="entityPropertyType.propertyId"
ng-change="businessCardSelected($index, entityPropertyType.propertyId)">
<option value="">Please select</option>
</select>
Demo: https://plnkr.co/edit/v6KbJSkqu5XNz2LUfbrK?p=preview
I have code like this
{"xyz":[{"a":1,"b":"","c":""}],
"pqr":["l","m"],
"abc":["1234","5678"]}
<div ng-model="item" ng-repeat="product in xyz">
<div>{product.a}</div>
<div>
<select>
<option ng-repeat="value in pqr">{{value}}</option>
</select>
</div>
<div>
<select>
<option ng-repeat="number in abc">{{number}}</option>
</select>
</div>
</div>
I want to update my object on changing the values in dropdowns and update the onject "xyz"!
try like this.
you should define model for select tag.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data =
{
"xyz":[{"a":1,"b":"","c":""}],
"pqr":["l","m"],
"abc":["1234","5678"]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div ng-repeat="(key,value) in data.xyz">
<div ng-repeat="(k,v) in value">{{v}}</div>
<div>
<select ng-model="model1" ng-options="v1 as v1 for v1 in data.pqr" ng-change="value.b = model1">
</select>
</div>
<div>
<select ng-model="model2" ng-options="number as number for number in data.abc" ng-change="value.c = model2">
</select>
</div>
</div>
</div>
First of all don't use ng-repeat on <option> use ng-options instead. Documentation and examples can be found here: https://docs.angularjs.org/api/ng/directive/ngOptions
As for your code, you will need to bind the select to your object:
<select ng-model="product.a" ...> //or which ever property you are trying to update
I'm trying to implement angular selectpicker.
The thing is when you go like this
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
everything's displayed good and you can see that selectpicker has a title of the first option.
But as soon as I added ng-model directive, It started having "Nothing selected" title that's completely unsuitable for me.
So how can I fix this?
HTML
<html ng-app="selectDemoApp">
<body>
<div role="main">
<div class="container">
<section ng-controller="SelectCtrl">
<div class="page-header">
<select class="selectpicker" ng-model="changeState" ng-change="go(changeState)">
<option value="https://google.com">Mustard</a>
</option>
<option value="/2.html">Ketchup</a>
</option>
<option value="/3.html">Relish</a>
</select>
</div>
</section>
</div>
</div>
</body>
</html>
JS
angular.module('selectDemoApp', [ 'angular-bootstrap-select', 'angular-bootstrap-select.extra']);
function SelectCtrl($scope, $location) {
$scope.go = function ( path ) {
alert(path)
};
}
Insert option:
<option style="display:none" value="">select...</option>
Add ng-init to initialize the value for the select field. Something like this ng-init="changeState='https://google.com'