What is the purpose of the trackexpr (track by) in ng-options when using Angular 1.3?
In Angular 1.2, this expression changed the value="" expressions on the generated options to match the result of trackexpr on each item in the collection. This is no longer the case in Angular 1.3, per this jsfiddle: http://jsfiddle.net/3fzkym3m/. Now the options just have incremental values.
In Angular 1.2, the generated options list is:
<select ng-options="item.text for item in data track by item.value" ng-model="selectedItem" class="ng-pristine ng-valid">
<option value="" class=""> - Select item - </option>
<option value="4">item1</option>
<option value="12">item2</option>
<option value="11">item3</option>
<option value="19">item4</option>
<option value="17">item5</option>
<option value="26">item6</option>
</select>
In Angular 1.3, the generated options list is:
<select ng-options="item.text for item in data track by item.value" ng-model="selectedItem" class="ng-pristine ng-untouched ng-valid">
<option value="" class=""> - Select item - </option>
<option value="0">item1</option>
<option value="1">item2</option>
<option value="2">item3</option>
<option value="3">item4</option>
<option value="4">item5</option>
<option value="5">item6</option>
</select>
Is Angular still using track by to match objects between the source collection and the selected item? Is there still a performance benefit to doing this? Why did this change between Angular 1.2 and 1.3?
Based on this issue on AngularJS's GitHub repository, it appears that this was an unintended side effect of changes made in Angular 1.3. https://github.com/angular/angular.js/issues/9592. Per the discussion there it sounds like they intend to revert the behavior to the way it was in Angular 1.2.
Related
Angular < 1.4 works with ng-options shown as such:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue">
With the following array of options:
[{ value:"4_220588",label:"dropdown 1-test value 1"},{value:"4_220589",label:"dropdown 1-test value 2"}]
If you look at the resultant HTML is is as you would expect:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-touched">
<option value="" class="">-- SELECT ONE --</option>
<option value="0" label="dropdown 1-test value 1">dropdown 1-test value 1</option>
<option value="1" label="dropdown 1-test value 2">dropdown 1-test value 2</option>
</select>
As soon as you change the angular version to Angular 1.4+, the option value attribute get's messed up. Here is the output with the same ng-options using a newer version of angular:
<select ng-options="option.value as option.label for option in options" ng-model="selectedValue" class="ng-pristine ng-valid ng-empty ng-touched">
<option value="" class="" selected="selected">-- SELECT ONE --</option>
<option label="dropdown 1-test value 1" value="string:4_220588">dropdown 1-test value 1</option>
<option label="dropdown 1-test value 2" value="string:4_220589">dropdown 1-test value 2</option>
</select>
What is the solution to getting the value to show up still as the index of the array?
Here is the plnkr: http://plnkr.co/edit/3CTUI9b9ntTGWhXDNQI5?p=preview
Your application logic should not be sensitive to the value attribute in the dropdown, because ng-model will set the model correctly regardless of what is output in the HTML. If you application logic does expect a specific format for this attribute, you have 3 ways to deal with this breaking change.
Use ng-repeat instead of ng-options. This is the least recommended option, as it changes the way the select lists work significantly.
Use a track by clause to enforce the key format that you are expecting, i.e. option.value as option.label for option in options track by option.value. This presumes that option.value exists and is the value you wish to represent. http://plnkr.co/edit/TSXfkpf1lhsE9QYa2NAc?p=preview
Change your application logic to expect the hashkey instead, or preferably correct the logic so that it only relies upon ng-model.
One solution would be to use ng-repeat over the options.
<select ng-model="vm.selectedValue">
<option value="" selected disabled>-- SELECT ONE --</option>
<option ng-repeat="option in options"
value="$index"
ng-selected="option === vm.selectedValue">
{{option.label}}
</option>
</select>
Here is your updated Plunkr.
This should do the trick:
<select ng-options="index as option.label for (index, option) in options2" ng-model="vm.selectedValue">
<option value="">-- SELECT ONE --</option>
</select>
On render the value of the selected option would be string:index but will output the desired value without the type included. Here is your edited plunker with the expected result in the Selected Value:
Plunker
I have some doubts with using ngoptions. I am not able to set value attribute for the option items.Here is example plunker
$scope.ListOfValues=[{optiontext:'Active',optionvalue:'opt1'},
{optiontext:'inactive',optionvalue:'opt2'},
{optiontext:'terminated',optionvalue:'opt3'}];
And my html code is
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues">
</select>
The generated html is as shown below.
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="string:opt1" label="Active">Active</option>
<option value="string:opt2" label="inactive">inactive</option>
<option value="string:opt3" label="terminated">terminated</option>
</select>
I was expecting it to be as shown below
<select id="emptype" ng-model="empstatus" ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues" class="ng-valid ng-dirty ng-valid-parse ng-touched">
<option value="opt1" label="Active">Active</option>
<option value="opt2" label="inactive">inactive</option>
<option value="opt3" label="terminated">terminated</option>
</select>
So why does it add string: to the value attribute? How i can get my desired output?
It has to deal with 1.3 -> 1.4 Angular version API change - if you check this plunkr (v.1.3) it will show just indexes as values of the <option> tags.
To make it also work with Angular +1.4 you should add the following statement to your ng-options expression track by emp.optionvalue. See this plunkr (v.1.4) .
<select id="emptype"
ng-model="empstatus"
ng-options="emp.optionvalue as emp.optiontext for emp in ListOfValues track by emp.optionvalue">
</select>
But the value of the ng-model is correctly updated in both cases, see {{empstatus}} in template of my examples.
So as #ExplosionPills say that should not be a issue.
I would like to have a select with a placeholder in angularjs with bootstrap. The solutions I have found do not work with angular
Here is my angular markup:
<select ng-model="myModel"
ng-options="p.name for p in ..."
class="form-control list-selector required">
<option value='' disabled selected>Please Choose</option>
</select>
If someone has a working solution...
thanks :)
You need to add an empty option to your select:
<option value="">- Please Choose -</option>
Here is a working example: http://jsfiddle.net/DianaNassar/FShdc/
For Angularjs Versions and reactive forms , if you are using ngValue to bind values in options , the following type of solution will work:
<option value='' selected ng-value="null">Please Choose</option>
For Angular 2+ Versions something like this will work-
<select class="form-control"
formControlName="roomType"
(change)="changeRoomType($event)">
<option [ngValue]="null" selected>Room Type</option>
<option *ngFor="let room of roomTypes" [ngValue]="room">{{room}}</option>
</select>
For reference, check this link out-https://netbasal.com/angular-quick-tip-how-to-show-a-placeholder-in-select-control-bab688f98b98
I have a dropdown;
<select class="form-control" data-ng-model="selected_category" data-ng-change="search(true, true)">
<option value="0">Select Category</option>
<option value="{{category.id}}" data-ng-repeat="category in categories">{{category.name}}</option>
</select>
Which works perfect. However, I am manipulating the scope outside of Angular (valid reason) and I use this (It's in coffeescript but easy to understand)
scope.$apply (s) ->
s.units = _me.attr('data-units')
s.selected_category = parseInt(_me.attr('data-category'))
s.search(true,true)
It appears to work in that everything depending on that $scope.selected_category variable changes (The correct products / text comes up) but the dropdown just goes blank if I've selected Select Category (IE: Not changed it since that change) and stays the same if anything else is selected. Looking at the blank dropdown when I use the element inspector in chrome I can see this:
<option value="? number:31 ?"></option>
What's up with that?
It appears that you are missing the ng-selected attribute on option to let Angular know which option is currently selected:
<select class="form-control" data-ng-model="selected_category" data-ng-change="search(true, true)">
<option value="0">Select Category</option>
<option value="{{category.id}}" data-ng-selected="selected_category.id == category.id" data-ng-repeat="category in categories">{{category.name}}</option>
</select>
However, it is prefered to use ng-options if you don't need to do anything to advanced. So, I'd recommend (as #TheSharpieOne mentions in comments), that you change to this:
<select ng-model="selected_category" ng-options="c.name for c in categories">
<option value="">Select Category</option>
</select>
If you need to track by the id then use a track by clause:
<select ng-model="selected_category" ng-options="c.name for c in categories track by c.id">
<option value="">Select Category</option>
</select>
I have the following object:
[
{"id":"150c67d4-952b-45b0-b287-f651a5f6d82b","name":"xx"},
{"id":"9001f011-3a0c-4d45-a0fb-eabb4c83ff83","name":"yy"},
{"id":"9b8b93af-cfef-451a-8dda-7373d9154f60","name":"zz"}
]
Here's my HTML:
<select
data-ng-model="option.selectedCreatedBy"
data-ng-options="item.id as item.name for item in option.userProfilesPlus">
<option style="display: none" value="">Select User</option>
</select>
The result is:
<select
data-ng-model="option.selectedCreatedBy"
data-ng-options="item.id as item.name for item in option.userProfilesPlus"
><option style="display: none" value="" class="">Select User</option>
<option value="0" selected="selected">*</option>
<option value="1">xx</option>
<option value="2">yy</option>
<option value="3">zz</option></select>
How can I make this so that the values stored are the actual id's ?
When you are using the ng-option to generate the option list, you don't have control over the values generated for options. For an array it is the index into the array.
If you want to have specific value in the option field, you have to use ng-repeat for it.
In any case, you should not be very concern about specific of html generated, angular can update model correctly in any case.