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下拉菜單不顯示選定的值

回答

相關問題