AngularJS下拉菜单不显示选定的值

在角度下拉菜单中显示选定值时遇到问题。它工作时，我给这样的AngularJS下拉菜单不显示选定的值

$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：

谢谢萨米尔-DAS。我根据你的建议进行了修正。

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

来源

2015-04-02 Raj Adroit

嗯，因为

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

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

的一部分。当你使用{{}}装上去的模板，角在其观察者列表中添加它。

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

selectedItem附带了您在控制器中设置的对象。在同时脏检查总结，棱角分明的意志检查selectedItem对{ name: 'two', age: 27 }不反对$scope.items

希望你明白我的意思

来源

2015-04-02 07:48:00 Samir

你有什么办法解决这一问题？ – 2015-04-02 07:52:43

你将不得不使用同一个对象。您可以首先搜索您想要开始的项目，然后分配找到的项目 – Samir 2015-04-02 08:04:01

这是不是的角度特性/问题，它是如何反对平等工作的后果的JavaScript。 This article做了相当好的工作，以相当简洁的方式解释发生了什么，并给出了一些示例。查看lodash's isEqual method的源代码（最终将带您到baseIsEqualDeep的定义），以了解您在纯JS中如何实现您的目标。

在任何情况下，我不认为有一个简单的方法来实现这一目标的角度，你将不得不重新编写的方式ng-options工作的，你可能不想去那里...

来源

2015-04-02 07:56:57

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

来源

2015-04-02 08:00:28 Himanshu

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

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

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

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

来源

2015-04-02 08:44:38 noj

AngularJS下拉菜单不显示选定的值

回答

相关问题