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?
$ 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."
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 .
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)
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>
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'];