如果分配的值为 Number ，Angular 1.6，则使用 ng-repeat 选择选项不选择答案

【问题标题】：Select option using ng-repeat not selecting if assigned value is Number , Angular 1.6如果分配的值为 Number ，Angular 1.6，则使用 ng-repeat 选择选项不选择
【发布时间】：2017-12-01 16:51:10
【问题描述】：

我在 Angular 1.6 中遇到了一个特殊问题，相同的代码 在 Angular 1.2 上运行良好，当我们尝试分配由 ng-repeat 创建的下拉列表的选定值时使用数字不会被选中，但会分配模型值。

查看下面的示例，我已为 $scope.selectedOne = 1; 分配了编号和 $scope.selectedTwo = "1"; 带有字符串，第一个下拉菜单没有被选中，而第二个下拉菜单被选中。我对两个下拉菜单都使用相同的项目。同一段代码在 Angular 1.2 中运行良好（两种情况都选择）。

谁能解释一下这两个版本的区别

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>

在回答 stackoverflow.com/questions/44799901/... 这个问题后，我遇到了这个问题，它在 Angular 1.2 中运行良好（两种情况都选择）。

【问题讨论】：

Remove empty item from select drop down angularjs的可能重复
你应该看看 NgOptions 而不是在选项标签上使用 NgRepeat
在回答 stackoverflow.com/questions/44799901/… 这个问题后，我遇到了这个问题，它在 Angular 1.2 上运行良好

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

Matching model and option values:

如果您使用选项的 value 属性设置选项值，或 textContent，该值将始终是一个字符串，这意味着模型值也必须是字符串。否则选择指令无法正确匹配。

对于如何将模型绑定到非字符串值也有不同的策略。

它适用于 AngularJS v1.2，因为此更改是在 v1.4 中引入的 - 看看这个migration guide：

由于7fda214c，select 指令现在将使用严格比较 ngModel 范围值与 option 值的比较以确定哪个选项被选中。这意味着非字符串范围值（例如Number 或Boolean) 不会与等效的选项字符串匹配（如字符串"123"、"true" 或"false"）。

【讨论】：

【解决方案2】：

这种变化实际上发生在从 angularjs 1.3 到 1.4 的迁移过程中，所以从迁移版本guide doc 开始：

由于 7fda214c，select 指令现在将使用严格比较 ngModel 范围值与选项值的比较以确定哪个选项被选中。这意味着非字符串范围值（例如 Number 或布尔值）将不会与等效的选项字符串匹配（如字符串“123”、“true”或“false”）。

修复这个使用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>

【讨论】：

【解决方案3】：

从 v1.6 开始，ngValue 还会设置元素的 value 属性（除了 value 属性）。它可能不会影响您的用例，但这是另一个值得牢记的区别。

请看下面的讨论：

What is the difference between `value` attribute and `ng-value` attributes in angularjs

【讨论】：