AngularJS ng-options ne rendant pas les valeurs
comment rendre la valeur de la liste d'options suivante?
$scope.limits = [ {value: '5', text: 'Afficher 5 par page'},
{value: '10', text: 'Afficher 10 par page'},
{value: '15', text: 'Afficher 15 par page'},
{value: '20', text: 'Afficher 20 par page'}
];
<select id="limitType" name="limit" ng-model="limit" ng-options="limit.value as limit.text for limit in limits"></select> enregistrement par page
résultat attendu (valeur attendue = limite).la valeur":
<select ng-options="option.value as option.text for option in limits" ng-model="limit" id="limitType" class="ng-pristine ng-valid">
<option value="5" selected="selected">Afficher 5 par page</option>
<option value="10">Afficher 10 par page</option>
<option value="15">Afficher 15 par page</option>
<option value="20">Afficher 20 par page</option>
</select>
résultat:
<select ng-options="option.value as option.text for option in limits" ng-model="limit" id="limitType" class="ng-pristine ng-valid">
<option value="0" selected="selected">Afficher 5 par page</option>
<option value="1">Afficher 10 par page</option>
<option value="2">Afficher 15 par page</option>
<option value="3">Afficher 20 par page</option>
</select>
4 réponses
la directive ng-options ne définit pas l'attribut value sur les éléments <options> . Il utilise toujours une séquence.
utilisant limit.value as limit.text for limit in limits signifie:
- placer l'étiquette de
<option>commelimit.text - enregistrez la valeur
limit.valuedans le selectng-model
vérifiez ce violon: http://jsfiddle.net/bmleite/k58Hw /
pour que cela fonctionne, vous (nous) devez changer la façon dont nous soumettons les données au serveur.
le navigateur est" stupide", et il ne prend pas soin de AngularJS, jQuery ou tout autre cadre JavaScript faisant magie dans le code derrière. Si l'option contient une valeur d'index au lieu de la valeur réelle, le navigateur enverra la valeur d'index au serveur.
Si vous voulez le faire fonctionner, vous devez utiliser ng-repeat en conjonction avec l'option tag pour rendre des valeurs correctes, ou pour soumettre des données en appelant la méthode .post du contrôleur AngularJS.
C'est pourquoi J'aime et déteste AngularJS.
je me rends compte que c'est une vieille question mais j'ai eu un problème avec cela aussi. Ma solution simple à cela était de créer une entrée cachée et de la lier en utilisant ngModel avec le select. Ensuite, lorsque vous faites le formulaire normal soumettre, soumettre l'entrée cachée. Espérons que cette aide.
pour une approche alternative, nous pouvons utiliser ng-repeat
<select ng-model="limit" id="limitType" class="ng-pristine ng-valid" >
<option ng-repeat="option in limits " value="{{option.value}}" >
{{option.text}}
</option>
</select>