javascript AngularJS 下拉列表未显示选定值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29407513/
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 dropdown not showing selected value
提问by Raj Adroit
Am facing problem in displaying selected value in angular dropdown. it works when i give like this
在角度下拉列表中显示所选值时遇到问题。当我这样给予时它会起作用
$scope.selectedItem = $scope.items[1];
not working, if i give directly that value
不工作，如果我直接给出那个值
$scope.selectedItem = { name: 'two', age: 27 };
HTML:
HTML:
<html ng-app="app">
<body>
<div ng-controller="Test">
<select ng-model="selectedItem" ng-options="item.name for item in items">
</select>
</div>
</body>
</html>
JS:
JS：
var app = angular.module('app',[]);
app.controller('Test',function($scope){
$scope.items = [{name: 'one', age: 30 },{ name: 'two', age: 27 },{ name: 'three', age: 50 }];
$scope.selectedItem = $scope.items[1];
});
CODEPEN:http://codepen.io/anon/pen/zxXpmR
CODEPEN：http ://codepen.io/anon/pen/zxXpmR
SOLUTION:
解决方案：
Thank you samir-das. I fixed as per your suggestion.
谢谢萨米尔达斯。我按照你的建议修好了。
var choosen_value = { name: 'two', age: 27 };
angular.forEach($scope.items, function(item){
if(angular.equals(choosen_value, item)){
$scope.selectedItem = item;
}
});
采纳答案by Samir Das
Well, because
嗯，因为
$scope.items[1]and { name: 'two', age: 27 }is totally different thing.
$scope.items[1]并且{ name: 'two', age: 27 }是完全不同的事情。
{ name: 'two', age: 27 }is a totally different object whereas $scope.items[1]is part of the object $scope.items
{ name: 'two', age: 27 }是一个完全不同的对象，而是对象$scope.items[1]的一部分$scope.items
When you put something in the template using {{}}, angular add it in its watcher list.
当您使用 将某些内容放入模板时{{}}，angular 将其添加到其观察者列表中。
SO when angular put it in the watch list, it was an object (i.e. { name: 'two', age: 27 }) that is different than $scope.items.
因此，当 angular 将其放入监视列表时，它是一个{ name: 'two', age: 27 }不同于$scope.items.
selectedItemis attached with the object that you set in the controller. In summary while dirty checking, angular will checks selectedItemagainst { name: 'two', age: 27 }NOT against $scope.items
selectedItem与您在控制器中设置的对象相连。总之，在脏检查时，angular 将selectedItem根据 { name: 'two', age: 27 }NOT 进行检查$scope.items
Hope you understand what I mean
希望你明白我的意思
回答by noj
As explained in the other answers, while the two objects may have the same properties and values, they are two different objects so angular doesn't consider them to be equal.
正如其他答案中所解释的，虽然这两个对象可能具有相同的属性和值，但它们是两个不同的对象，因此 angular 不认为它们相等。
You can however use the track byexpression in ng-optionsto specify a property which will decide equality:
但是，您可以使用ng-options 中的track by表达式来指定将决定相等的属性：
ng-options="item.name for item in items track by item.name"
ng-options="item.name for item in items track by item.name"
回答by Tadeá? Peták
This is notan Angular feature/issue, it is a consequence of how object equality works in Javascript. This articledoes a fairly good job in explaining what is going on in a pretty concise way and gives some examples. Check out the source of lodash's isEqual method(it will take you to the definition of baseIsEqualDeepeventually) to see how what you are trying to achieve can be done in pure JS.
这不是Angular 的特性/问题，它是 JavaScript 中对象相等性如何工作的结果。这篇文章很好地以一种非常简洁的方式解释了正在发生的事情，并给出了一些例子。查看lodash 的 isEqual 方法的来源（它会带你到baseIsEqualDeep最终的定义），看看你想要实现的目标是如何在纯 JS 中完成的。
In any case, I do not think there is an easy way to achieve this in Angular, you would have to re-write the way ng-optionsworks and you probably do not want to go there...
无论如何，我认为在 Angular 中没有一种简单的方法可以实现这一点，您必须重新编写ng-options工作方式，而且您可能不想去那里......
回答by Himanshu Mittal
In angular, Arrays and objects are passed by reference while strings, numbers and booleans are passed by value. So, angular interprets $scope.items[1]and { name: 'two', age: 27 }as two different objects. That's why your binding fails when you do $scope.selectedItem = { name: 'two', age: 27 };directly and find it in '$scope.items'.
在 angular 中，数组和对象是通过引用传递的，而字符串、数字和布尔值是通过值传递的。因此，angular 将$scope.items[1]和解释{ name: 'two', age: 27 }为两个不同的对象。这就是为什么当您$scope.selectedItem = { name: 'two', age: 27 };直接执行并在“$scope.items”中找到它时绑定失败的原因。
