ng-optionsでトラックを使用すると、セレクトボックスの値が更新されない

Question

ng-optionsにtrack byを使用すると、選択ボックスの値の1つを選択しても、Angularはセレクトボックスの値を更新しません。 2回目の試行後、モデル値がすでに設定されていても期待どおりに動作します。

var myapp = angular.module('myapp', []); 
 
myapp.controller('FirstCtrl', function ($scope) { 
 
    $scope.items = [ 
 
     ['ali', 'ali'] 
 
    ]; 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 
<div ng-app="myapp"> 
 
    <fieldset ng-controller="FirstCtrl"> 
 
     value: {{selected}} <br><br> 
 
     <select 
 
      ng-options="item[0] as item[1] for item in items track by item[0]" 
 
      ng-model="selected"></select> 
 
    </fieldset> 
 
</div>

Answer 1

だ

あなたが一緒にtrack byを使用することができないようですいくつかselect as式。

しかし、たとえば、あなたがng-options="item as item[1] for item in items track by item[0]"代わりのng-options="item[0] as item[1] for item in items track by item[0]"

https://jsfiddle.net/b9upojmb/1/

Answer 2

によってトラックの目的は、オブジェクトではない配列要素でそれを使用することです。私はオブジェクトを使用することをお勧めします。ここで（https://docs.angularjs.org/api/ng/directive/ngOptions - 「などを選択してトラック」段落を探して）これは、実際のドキュメントで説明しています例

var myapp = angular.module('myapp', []); 
 
myapp.controller('FirstCtrl', function ($scope) { 
 
    $scope.items = [ 
 
     { id :1, value : 'ali'}, 
 
     { id :2, value : 'ahmed'} 
 
    ]; 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 
<div ng-app="myapp"> 
 
    <fieldset ng-controller="FirstCtrl"> 
 
     value: {{selected}} <br><br> 
 
     <select 
 
      ng-options="item as item.value for item in items track by item.id" 
 
      ng-model="selected"></select> 
 
    </fieldset> 
 
</div>

Answer 3

として参照を使用している場合、それは動作しますがtrack byがobjectsの配列を必要とコメントし、あなたは、任意のオブジェクトのプロパティ

var myapp = angular.module('myapp', []); 
 
myapp.controller('FirstCtrl', function ($scope) { 
 
$scope.items = [ 
 
        { name : "ali" }, 
 
        { name : "ben" }, 
 
        { name : "bill" } 
 
       ] 
 

 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
 
<div ng-app="myapp"> 
 
    <fieldset ng-controller="FirstCtrl"> 
 
     value: {{selected}} <br><br> 
 
     <select 
 
      ng-options="item as item.name for item in items track by item.name" 
 
      ng-model="selected"></select> 
 
    </fieldset> 
 
</div>

によって追跡することができます