Question

在角度下拉列表中显示所选值时遇到问题。当我这样付出时它会起作用

$scope.selectedItem = $scope.items[1];

不工作，如果我直接给出该值

$scope.selectedItem = { name: 'two', age: 27 };

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 ：

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

SOLUTION：

谢谢samir-das。我根据你的建议修好了。

var choosen_value = { name: 'two', age: 27 };
angular.forEach($scope.items, function(item){
  if(angular.equals(choosen_value, item)){
    $scope.selectedItem = item;
  }
});

Answer 1

好吧，因为

$scope.items[1]和{ name: 'two', age: 27 }完全不同。

{ name: 'two', age: 27 }是完全不同的对象，而$scope.items[1]是对象的一部分$scope.items

当您使用{{}}在模板中放置某些内容时，angular会将其添加到其观察者列表中。

因此，当角度将其放入观察列表时，它是一个与{ name: 'two', age: 27 }不同的对象（即$scope.items）。

selectedItem附加了您在控制器中设置的对象。总之，在脏检查时，angular将检查selectedItem对{ name: 'two', age: 27 }不$scope.items

希望你明白我的意思

Answer 2

正如其他答案中所解释的那样，虽然两个对象可能具有相同的属性和值，但它们是两个不同的对象，因此角度不会认为它们是相等的。

但是，您可以使用ng-options中的track by表达式来指定决定相等性的属性：

ng-options="item.name for item in items track by item.name"

http://codepen.io/anon/pen/WbWMrp

Answer 3

这是不 Angular特征/问题，它是Javascript中对象平等如何工作的结果。 This article在以非常简洁的方式解释正在发生的事情方面做得相当不错，并给出了一些例子。查看lodash's isEqual method的来源（它最终会带你到baseIsEqualDeep的定义），看看你想要实现的是如何在纯JS中完成的。

在任何情况下，我认为在Angular中有一种简单的方法可以实现这一点，你必须重新编写ng-options的工作方式，你可能不想去那里...... < / p>

Answer 4

在角度中，数组和对象通过引用传递，而字符串，数字和布尔值按值传递。因此，angular将$scope.items[1]和{ name: 'two', age: 27 }解释为两个不同的对象。这就是你直接$scope.selectedItem = { name: 'two', age: 27 };并在'$ scope.items'中找到它时绑定失败的原因。

AngularJS下拉列表未显示选定值

4 个答案: