使用ng-repeat的Select选项不会选择分配的值是否为Number，Angular 1.6
[英]Select option using ng-repeat not selecting if assigned value is Number , Angular 1.6
问题描述
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. 
我在Angular 1.6中遇到了一个特有的问题，相同的代码对于Angular 1.2来说也可以正常工作 ，当我们尝试使用Number分配ng-repeat创建的下拉列表的选定值时，它没有被选中，但是指定了模型值。
Check example below , I have assigned $scope.selectedOne = 1; 检查下面的示例，我分配了$scope.selectedOne = 1; with number and $scope.selectedTwo = "1"; 与数字和$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). 相同的代码在Angular 1.2中正常工作（两种情况都选择）。
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). 在回答了stackoverflow.com/questions/44799901/…这个问题后，我遇到了这个问题，该问题在Angular 1.2（两种情况下均选择）中工作得很好。
3 个解决方案
解决方案1
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.
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 : 由于此更改是在v1.4中引入的，因此它适用于AngularJS v1.2-请查看此迁移指南 ：
Due to
7fda214c, theselectdirective will now use strict comparison of thengModelscope value againstoptionvalues to determine which option is selected.7fda214c，select指令现在将使用ngModel范围值与option值的严格比较来确定选择哪个选项。 This means non-string scope values (such asNumberorBoolean) will not be matched against equivalent option strings (such as the strings"123","true"or"false").Number或Boolean）将不会与等效的选项字符串（例如字符串"123"，"true"或"false"）匹配。
解决方案2
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). 从v1.6开始，ngValue还将设置元素的value属性（除了value属性之外）。 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 angularjs中的value属性和ng-value属性有什么区别
解决方案3
0 已采纳 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 : 实际上，此更改是在从angularjs 1.3迁移到1.4的过程中发生的，因此从迁移发行指南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.
to fix this use ng-value , Demo: 要解决此问题，请使用ng-value ，演示：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.