2017-01-16 66 views
2

我需要從ajax加載的數據中選擇combobox中的選項。該數據出現在對象列表中。問題在於ng-option通過引用比較對象,因此將模型設置爲對象元素結果在組合框中顯示新的空選項,而不是選擇正確的選項。Angular 1.5「track by」Ruines binding in ng-options

已知的解決方法是使用track by表達式。 這裏是示例代碼:

var myApp = angular.module("myApp", []); 

myApp.controller("myCtrl", function($scope) { 

    $scope.roles =[ 
    { key:"administrator", value:"ROLE_ADMIN" }, 
    { key:"operator", value:"ROLE_OPERATOR" }, 
    ]; 

    // this emulates data from server 
    // won't work without 'track by' 
    $scope.role={ key:"administrator", value:"ROLE_ADMIN" }; 

}); 

模板:

<body ng-app="myApp" ng-controller="myCtrl"> 
0: <input ng-model="roles[0].key" /> 
<br> 
1: <input ng-model="roles[1].key" /> 

<br> 
    select role: <select ng-model="role" ng-options="r.key for r in roles track by r.value"> 
    </select> 

    <pre>selected role={{role|json}}</pre> 
</body> 

這裏出現了另一個問題。當人們在組合框中選擇角色,然後 將其更改爲文本框中的「鍵」屬性時,所選角色保持不變。所以它看起來像綁定突然被打破。

https://jsfiddle.net/xLqackxw/8/

+0

它會工作如果你把ngOptions改成'