AngularJS下拉列表未显示所选值

AngularJS dropdown not showing selected value

本文关键字：显示 下拉列表 AngularJS      更新时间：2023-09-26

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

$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];
});

代码：http://codepen.io/anon/pen/zxXpmR

解决方案：

谢谢你，亲爱的。我按照你的建议解决了。

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

如其他答案所述，虽然这两个对象可能具有相同的属性和值，但它们是两个不同的对象，因此angular不认为它们相等。

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

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

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

好吧，因为

CCD_ 3和CCD_。

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

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

所以当angular把它放在观察列表中时，它是一个不同于$scope.items的对象（即{ name: 'two', age: 27 }）。

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

希望你能理解我的意思

这不是一个角度特性/问题，而是Javascript中对象平等工作方式的结果。这篇文章以非常简洁的方式很好地解释了正在发生的事情，并给出了一些例子。查看lodash的isEqual方法的来源（它最终将带您了解baseIsEqualDeep的定义），看看如何在纯JS中实现您想要实现的目标。

无论如何，我不认为在Angular中有一种简单的方法可以实现这一点，你必须重写ng-options的工作方式，你可能不想去那里。。。

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

相关文章：