2017-01-16 10 views
2

ajaxが読み込まれたデータからコンボボックスのオプションを選択する必要があります。そのデータはオブジェクトのリストとして提供されます。問題は、ng-optionがオブジェクトを参照で比較し、modelをobjects要素に設定すると、正しいオプションを選択する代わりにコンボボックスに新しい空のオプションが表示されるということです。ng-optionsでのruinesバインディングによる角1.5インチのトラック

既知の回避策は、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> 

ここで別の問題が生じます。コンボボックスで役割を選択した後に がテキストボックスの「キー」プロパティを変更すると、選択したロールは変更されません。だから綴じが突然壊れたように見える。

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

'$ scope.role' の値が{キーのようなオブジェクトになります: "管理者"、値:https://docs.angularjs.org/api/ng/directive/ngOptions

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select> 

だから、アンギュラドキュメントから

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

+0

ngOptionsを ''に変更すると、なぜ '' tack by ''する必要がありますか? –

+0

@AlonEitan彼はAPIがおそらく同じ 'value'を持ついくつかのオブジェクトを返すので、' track by'が必要です。 – Mistalis

+0

@AlonEitan、これを解決するための質問とコメントを追加しました。 – Dfr

答えて

0

」 ROLE_ADMIN "}または{key:"演算子 "、値:" ROLE_OPERATOR "}

関連する問題