angularjs - użycie $ indeks ng opcji

Question

Jeśli wiązania tablicę do znacznika wybierać korzystając z następujących przypadków:

<select ng-model="selData" ng-options="$index as d.name for d in data"> 

Znaczniki WARIANT uzyskać oczekiwane inkrementację indeksu wartości (0, 1, 2, .. .). Jednak po wybraniu czegoś z menu rozwijanego wartość selData zostaje powiązana z undefined. Czy wiązanie rzeczywiście działa?

Z drugiej strony, jeśli I wykonaj następujące czynności:

<select ng-model="selData" ng-options="d as d.name for d in data"> 

tagi opcję uzyskać ten sam indeks, ale cały obiekt jest związany na zmiany. Nie wiem, czy Angular ma to wesprzeć, czy jest to po prostu fajny błąd/efekt uboczny.

Answer 1

Indeks $ jest zdefiniowany dla powtarzania ng, a nie wyboru. Myślę, że to wyjaśnia undefined. (Tak więc, nie, to nie powinno działać).

Kątowe oparcie dla całego obiektu. Dokumentacja mogłaby być lepiej sformułowana, aby to wskazać, ale wskazuje na to: "ngOptions ... powinno być używane zamiast ngRepeat, jeśli chcesz, aby wybrany model był powiązany z wartością inną niż łańcuchowa."

Answer 2

Ponieważ nie można użyć $index, ale można spróbować indexOf.

HTML

<div ng-app ng-controller="MyCtrl"> 
    <select 
      ng-model="selectedItem" 
      ng-options="values.indexOf(selectedItem) as selectedItem for selectedItem in values"></select> 
    selectedItem: {{selectedItem}} 
</div> 

Controller

function MyCtrl($scope) { 
    $scope.values = ["Value1","Value2"]; 
    $scope.selectedItem = 0; 
} 

Demo Fiddle

Komentarz:

Array.prototype.indexOf nie jest obsługiwana w IE7 (8)

Answer 3

Ponieważ macierze są bardzo podobne do obiektów w JavaScripcie, można użyć składni „źródeł danych Object”. Sztuką jest w nawiasach w NG-opcji część:

var choices = [ 
    'One', 
    'Two', 
    'Three' 
]; 

W szablonie:

<select 
    ng-model="model.choice" 
    ng-options="idx as choice for (idx, choice) in choices"> 
</select> 

W końcu model.choice będzie miał wartość 0, 1, lub 2. Kiedy jest 0, zobaczysz "Jeden"; 1 wyświetli "Two" itd. Ale w modelu zobaczysz tylko wartość indeksu.

Ja dostosowałem tę informację z "Mastering Web Application Development with AngularJS" przez PACKT Publishing i zweryfikowałem na Angular reference documentation for select.

Answer 4

Możesz również użyć wartości ng = "$ index" w tagu <option>.

<select ng-model="selData"> 
<option ng-repeat="d in data track by $index" ng-value="$index"> 
    {{d.name}} 
</option> 
</select>