web-dev-qa-db-fra.com

Utilisation de $ index avec la directive 'ng-options' d’AngularJS?

Dites que je lie un tableau à une balise select en utilisant les éléments suivants:

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

Dans ce cas, une séquence de valeurs d'index est affectée aux balises option associées: (0, 1, 2, ...). Cependant, lorsque je sélectionne un élément dans la liste déroulante, la valeur de selData devient liée à undefined. La reliure devrait-elle réellement fonctionner?

D'autre part, dites que je fais plutôt ce qui suit:

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

Ici, les balises option obtiennent le même index, mais l'objet entier est lié à la modification. Cela fonctionne-t-il de cette manière par la conception ou ce comportement est-il simplement un bogue de Nice ou un effet secondaire de AngularJS?

angularjshtml-select
57
Jim Cote

$ index est défini pour ng-repeat, not select. Je pense que cela explique la undefined. (Alors, non, ça ne devrait pas marcher.)

Les supports angulaires se lient sur tout l'objet. La documentation pourrait être mieux libellée pour l'indiquer, mais elle l'indique: "ngOptions ... doit être utilisé à la place de ngRepeat lorsque vous souhaitez que le modèle sélectionné soit lié à une valeur non chaîne."

21
Mark Rajcok

Les tableaux étant très similaires aux objets en JavaScript, vous pouvez utiliser la syntaxe pour "sources de données d'objet". Le truc est dans les crochets dans la partie ng-options:

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

Dans le modèle:

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

À la fin, model.choice aura la valeur 0, 1 ou 2. Quand il est 0, vous verrez One; 1 affichera Two, etc. Mais dans le modèle, vous ne verrez que la valeur d'index.

J'ai adapté ces informations à partir de "Maîtriser le développement d'applications Web avec AngularJS" par PACKT Publishing, et les avoir vérifiées à la documentation de référence angulaire de select .

193
Harry Pehkonen

Puisque vous ne pouvez pas utiliser $index mais que vous pouvez essayer 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>

Contrôleur 

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

Démo Fiddle

Commentaire:

Array.prototype.indexOf n'est pas pris en charge dans IE7 (8)

45
Maxim Shoustin

Vous pouvez également utiliser ng-value = '$ index' dans la balise <option>.

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

N'utilisez pas $index dans les balises select. Utilisez $index dans les balises d'option si vous souhaitez utiliser les index de tableau en tant que valeurs ou options.

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

Si vous voulez utiliser des valeurs internes, insérez-les simplement dans l'attribut value en tant qu'expression de liaison comme

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

et mon code de contrôleur soit comme:

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