javascript Angularjs select 不会将匹配模型标记为已选择
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25706292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angularjs select does not mark matching model as selected
提问by Micor
I have a problem with my ngModel in select not showing as selected. Both id and name are matching but its not working, see selectedState. Pointing model to the actual object within options array works, see selelectedState2. No idea whats going on ...
我的 ngModel 在 select 中出现问题，未显示为选中状态。id 和 name 都匹配但它不起作用，请参阅 selectedState。将模型指向 options 数组中的实际对象有效，请参阅 selectedState2。不知道怎么回事...
Fiddle: http://jsfiddle.net/fedorsmirnoff/b49n4Ldp/2/
小提琴：http: //jsfiddle.net/fedorsmirnoff/b49n4Ldp/2/
<select ng-model="selectedState" ng-options="state.name for state in stateOptions"></select>
<select ng-model="selectedState2" ng-options="state.name for state in stateOptions"></select>
function MainCtrl($scope) {
$scope.stateOptions = [
{id: 1, name: "Alaska"},
{id: 2, name: "Montana"},
{id: 3, name: "Nebraska"},
{id: 4, name: "Texas"}
]
$scope.selectedState = {id: 2, name: "Montana"};
$scope.selectedState2 = $scope.stateOptions[1];
}
回答by m59
This is because each object has it's own $hashKeyprovided by Angular that Angular uses to determine whether they are the same. You're creating a new object (with a different $hashKey) on $scope.selectedState. The way you set it on $scope.selectedState2is correct.
这是因为每个对象都有自己的$hashKey由 Angular 提供的，Angular 用它来确定它们是否相同。您正在 上创建一个新对象（具有不同的$hashKey）$scope.selectedState。你设置的方式$scope.selectedState2是正确的。
You can also use track byto make Angular track by state.idinstead of the object's $hashKey:
您还可以使用代替对象的track by来制作 Angular 跟踪：state.id$hashKey
<select ng-model="selectedState" ng-options="state.name for state in stateOptions track by state.id"></select>
回答by PSL
If you are providing an object as the model which does not hold the reference to the existing list, then use track bywith the unique value of your model, so that instead of using the custom unique $$hashKey, ng-options will use the property that you provide in the track by for tracking the ng-model that is being set.
如果您提供一个对象作为模型，该模型不包含对现有列表的引用，则使用track by模型的唯一值，这样 ng-options 将使用该属性，而不是使用自定义的唯一 $$hashKey您在跟踪中提供用于跟踪正在设置的 ng-model。
ng-options="state.name for state in stateOptions track by state.id"
Not only that it is useful in setting ng-model to any reference, but also it has a great deal of performance effectiveness as well especially when your list gets refreshed, the elements will not be removed and recreated, instead angular will just update the existing element.
它不仅在将 ng-model 设置为任何引用时很有用，而且还具有很大的性能效率，尤其是当您的列表被刷新时，元素不会被删除和重新创建，而 angular 只会更新现有的元素。
Here is a very good example for this.
这是一个很好的例子。
回答by Dalorzo
Angular Team stated this issue in the documentation for ngSelect here:
角团队陈述的文档ngSelect在这个问题在这里：
Note:ngModel compares by reference, not value. This is important when binding to an array of objects. See an example in this jsfiddle.
注意：ngModel 通过引用进行比较，而不是值。这在绑定到对象数组时很重要。请参阅此jsfiddle 中的示例。
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 }
];
// Although this object has the same properties as the one in $scope.options,
// Angular considers them different because it compares based on reference
$scope.incorrectlySelected = { label: 'two', value: 2 };
// Here we are referencing the same object, so Angular inits the select box correctly
$scope.correctlySelected = $scope.options[1];
回答by Tharaka
When you set $scope.selectedState, you are actually creating a new javascript object, which is not an element of the $scope.stateOptions. Hence, the select element would not be selecting the corresponding element from $scope.stateOptions.
当您设置 $scope.selectedState 时，您实际上是在创建一个新的 javascript 对象，它不是 $scope.stateOptions 的元素。因此，select 元素不会从 $scope.stateOptions 中选择相应的元素。
You can use 'track by' in the select expression if you need to select items by a unique attr value.
如果您需要按唯一的属性值选择项目，则可以在选择表达式中使用“跟踪依据”。
回答by Mindastic
Try adding Track by state.id at the end of your ng-options statement.
尝试在 ng-options 语句的末尾添加 Track by state.id。
回答by Hung Nguyen
I think Angular uses reference checking instead of comparing two objects with the same properties. In your case $scope.selectedState2 returns a different object. I usually use understore to find the selected item from an array for initialization.
我认为 Angular 使用引用检查而不是比较具有相同属性的两个对象。在您的情况下 $scope.selectedState2 返回一个不同的对象。我通常使用 understore 从数组中查找所选项目进行初始化。
