I'm trying to link two select inputs, so when I change one the other will change based on the selected value in the first select input.
I used ng-options for that, as following :
first select :
ng-options="region.codeRegion as region.nomRegion for region in regions"
second select :
ng-options="province.codeProvince as province.nomProvince for province in candidature.resident.eps.region.provinces track by province.codeProvince"
for the data I'm using you can find it in the plunker below.
the first select is working but the second didn't work.
Here is a plunker for it : http://plnkr.co/edit/HLCIw099H4UYkGg4s78h?p=preview
How can I solve this ?
You should have ng-model="selectedRegion on your first select, and on the second select list options based on selectedRegion.
<select ng-options="region.nomRegion for region in regions" ng-model="selectedRegion"></select>
<select ng-options="province.codeProvince for province in selectedRegion.provinces track by province.codeProvince" ng-model="candidature.resident.eps.province"></select>
Here is the updated plunker
Related
<div class="filter-box">
<select ng-model="$ctrl.customModel"
ng-options= 'option.id as option.name for option in transactionstatusList'
ng-change="transactionStatusChange()">
<option value="" selected="selected">No Search</option>
</select>
</div>
I am using angularjs ng-options to show data in select box but in option i have one hard-coded value is No-search how to show that value select at first because when data comes dynamically it shows first value from the data
Your code should work well if you have undefined customModel.
$scope.customModel;
Demo 1
However, if $scope.customModel is predefined, after async call, selected option jumps regards to ng-model
Demo 2
Is it possible to use ng-paste component on select components?
I can put it working on text componentes, but I want to do the same on Select Box. Imagine that I want 10 rows, if I paste the 9th value the ideal is to select them.
plunkr example :
<select ng-model="myselect" ng-options="o for o in options" ng-paste="paste2()" ></select>
plunk
I have a form where I have to enter a country from a list in order to add different shipping costs to a total. As I am using ngCart directive, I have to use ng-click in order to send that info to the directive.
The problem is that I have two different input options with the same fields in different parts of the form, and I would like to update the value of one when I manually change the other, so that displayed option is always the same in both inputs.
I attach a http://jsfiddle.net/nf2z1a00/ with my code. Thanks in advance!
You can use ng-model on the select and use ng-options to take care of the options and the shipping like this:
<select ng-model="selectedCountry" ng-options="country.name for country in countries" ng-change="changeChipping()">
</select>
I've update your fiddle here
Put same ng-model in you similar select boxes :
<select ng-model="shippingCountry">
//first
</select>
<select ng-model="shippingCountry">
//second : notice the same ng-model
</select>
I have a lot of select boxes in my application, being generated by lists of data and assigned to various ng-models.
I want to set the ng-model value to the first available option (respecting filters) of all select inputs globally in the app.
So for example a select input like this:
<select ng-model="entry.employee">
<option ng-value="employee.name" ng-repeat="employee in employees | filter:active">{{employee.name}}</option>
</select>
The entry.employee ng-model defaults to null, I need every select box to never be null but always select the first valid option of a select input by default.
It needs to be global as well and be generic enough to work with any type of select input.
Here is the data:
$scope.employees= [
{'name':'Bill'},
{'name':'Frank'},
{'name':'Ted'},
];
Instead of using ng-repeat on option elements use directly ng-option on select tag.
for example
<select class="form-control" ng-options="item.name for item in employees track by item.id" ng-model="selectedItem"></select>
in you controller use:
$scope.selectedItem=$scope.employees[0];
your object would be like:
$scope.employees= [
{id:'1','name':'Bill'},
{id:'2','name':'Frank'},
{id:'3','name':'Ted'},
];
In this case let you select tags be 'n' numbers but whenever you want you ng-model to be the first one just initialize it with the first element in your Object.
Also there is a good thing using ng-option is whenever you want to change the value of the select element at runtime you just need to update the selectedItem element.
Hope this resolves your query
I'm using a select tag with a ng-model attribute. I get the value of the selected element in ng-model. How is it possible to also get the label of the selected element.
I would like to retrieve both the label and its value. Thanks.
I'm guessing you are either using ng-repeat to create your choices, or typing them manually in the template. It is possible if you set your labels and values in the same model. If you have:
$scope.choices = {
"choiceone" : "The first Choice",
"choicetwo" : "The second Choice",
"choicethree" : "The third Choice"}
You can implement them like so:
<select ng-model="choice">
<option ng-repeat="(key, value) in choices" value="{{key}}">{{value}}</option>
</select>
However, this isn't the best way to use the select directive (assuming this is what you are doing). The select directive has a ng-options attribute that defines both value and label, in a cleaner fashion. I've edited the doc's example Plunkr on this subject, including a example usage of a ngRepeat here: http://plnkr.co/edit/sjQuhlgBh8WWJJoaSSMG?p=preview
Check here for the docs on the ng-options attibute: http://docs.angularjs.org/api/ng.directive:select