webentwicklung-frage-antwort-db.com.de

$ Index mit der 'ng-options'-Direktive von AngularJS verwenden?

Sagen Sie, dass ich ein Array an ein select-Tag binde, indem Sie Folgendes verwenden:

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

In diesem Fall wird den zugehörigen option-Tags eine Folge von Indexwerten zugewiesen: (0, 1, 2, ...). Wenn ich jedoch etwas aus dem Dropdown-Menü auswähle, wird der Wert von selData an undefined gebunden. Sollte die Bindung tatsächlich funktionieren?

Andererseits sage ich stattdessen Folgendes:

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

Hier erhalten die option-Tags den gleichen Index, das gesamte Objekt ist jedoch bei Änderungen gebunden. Funktioniert es auf diese Weise so oder ist dieses Verhalten einfach ein Fehler oder eine Nebenwirkung von AngularJS?

57
Jim Cote

$ index ist für ng-repeat definiert, nicht select. Ich denke, das erklärt die undefined. (Also, nein, das sollte nicht funktionieren.)

Angular unterstützt die Bindung des gesamten Objekts. Die Dokumentation könnte besser formuliert werden, um darauf hinzuweisen, aber es weist darauf hin: "ngOptions ... sollte anstelle von ngRepeat verwendet werden, wenn das ausgewählte Modell an einen Nicht-String-Wert gebunden werden soll."

21
Mark Rajcok

Da Arrays Objekten in JavaScript sehr ähnlich sind, können Sie die Syntax für "Objektdatenquellen" verwenden. Der Trick ist in den Klammern im ng-options-Teil:

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

In der Vorlage:

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

Am Ende hat model.choice den Wert 0, 1 oder 2. Wenn es 0 ist, sehen Sie One; 1 zeigt Two usw. an. Im Modell wird jedoch nur der Indexwert angezeigt.

Ich habe diese Informationen aus "Mastering Web Application Development mit AngularJS" von PACKT Publishing angepasst und unter Angular Referenzdokumentation für select überprüft.

193
Harry Pehkonen

Da Sie $index nicht verwenden können, aber indexOf versuchen können.

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

Kommentar:

Array.prototype.indexOf wird in IE7 (8) nicht unterstützt

45
Maxim Shoustin

Sie können auch ng-value = '$ index' im <option>-Tag verwenden.

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

Verwenden Sie nicht $index in ausgewählten Tags. Verwenden Sie $index innerhalb der Option-Tags, wenn Sie die Array-Indizes als Werte oder Optionen verwenden möchten.

<option ng-repeat="user in users" value="{{user.username}}">{{$index+1}}</option>

Wenn Sie Inside-Werte verwenden möchten, fügen Sie sie einfach als bindenden Ausdruck in das Value-Attribut ein

<option ng-repeat="user in users" value="{{$index+1}}">{{user.username}}</option>

und mein Controller-Code lautet:

var users = ['username':'bairavan', 'username':'testuser'];
1
Bairu