Select option using ng-repeat not selecting if assigned value is Number , Angular 1.6
Question
I came across a peculiar issue in Angular 1.6 , same code is working fine for Angular 1.2 , When we try to assign selected value of dropdown created by ng-repeat using a Number it is not getting selected but model value is assigned.
Check example below , I have assigned $scope.selectedOne = 1; with number and $scope.selectedTwo = "1"; with a string , First drop down is not getting selected whereas second drop down is getting selected. I am using same items for both drop down. The same piece of code is working fine in Angular 1.2(Selecting for both cases).
Can anyone please explain difference in these two versions
var app = angular.module('app', []); app.controller('homeCtrl', ['$scope', function($scope) { $scope.selectedOne = 1; $scope.selectedTwo = "1"; $scope.items = [{ name: 'harry111', id: 1 }, { name: 'rimmi', id: 2 } ]; }]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script> <html> <head> </head> <body ng-app="app"> <div ng-controller="homeCtrl"> <select ng-model="selectedOne"> <option ng-repeat="item in items" value="{{item.id}}"> {{item.name}} </option> </select> <div> selectedOne :{{selectedOne}} </div> <select ng-model="selectedTwo"> <option ng-repeat="item in items" value="{{item.id}}"> {{item.name}} </option> </select> <div> selectedOne :{{selectedOne}} </div> </div> </body> </html>
After answering stackoverflow.com/questions/44799901/… this question I came across this issue , which worked fine with Angular 1.2(Selecting for both cases).
3 answers
solution1
1 2017-06-28 11:54:54
Matching model and option values:
If you are setting the option value with the option's value attribute, or textContent, the value will always be a string which means that the model value must also be a string. Otherwise the select directive cannot match them correctly.
There are also different strategies on how to bind the model to a non-string value.
It works for AngularJS v1.2 since this changes were introduced in v1.4 - take a look at this migration guide :
Due to
7fda214c, theselectdirective will now use strict comparison of thengModelscope value againstoptionvalues to determine which option is selected. This means non-string scope values (such asNumberorBoolean) will not be matched against equivalent option strings (such as the strings"123","true"or"false").
solution2
0 2017-06-28 11:18:55
Starting with v1.6, ngValue will also set the value property of the element (in addition to the value attribute). It might not affect your use case, but it's another difference worth keeping in mind.
kindly take a look for this below discussion:
What is the difference between `value` attribute and `ng-value` attributes in angularjs
solution3
0 ACCPTED 2017-06-28 11:53:18
This change actually happened during migration from angularjs 1.3 to 1.4 , so from the migration release guide doc :
Due to 7fda214c , the select directive will now use strict comparison of the ngModel scope value against option values to determine which option is selected. This means non-string scope values (such as Number or Boolean) will not be matched against equivalent option strings (such as the strings "123", "true" or "false").
to fix this use ng-value , Demo:
var app = angular.module('app', []); app.controller('homeCtrl', ['$scope', function($scope) { $scope.change = function() { alert(typeof $scope.selectedOne ); alert(typeof $scope.selectedTwo ); } $scope.selectedOne = 1; $scope.selectedTwo = "1"; $scope.items = [{ name: 'harry111', id: 1 }, { name: 'rimmi', id: 2 } ]; }]);
<script src="https://code.angularjs.org/1.6.2/angular.js"></script> <html> <head> </head> <body ng-app="app"> <div ng-controller="homeCtrl"> <select ng-change="change()" ng-model="selectedOne"> <option ng-repeat="item in items" ng-value="{{item.id}}"> {{item.name}} </option> </select> <div> selectedOne :{{selectedOne}} </div> <select ng-change="change()" ng-model="selectedTwo"> <option ng-repeat="item in items" value="{{item.id}}"> {{item.name}} </option> </select> <div> selectedOne :{{selectedOne}} </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.