Angulaire, une valeur booléenne dans une boîte de sélection
Je veux mettre une valeur booléenne true ou false à l'aide d'un select voici mon code:
<select class="span9" ng-model="proposal.formalStoryboard">
<option value="false">Not Included</option>
<option value="true">Included</option>
</select>
La valeur (proposition.formalStoryboard) est correctement réglé à true ou à false mais le changement ne figurent pas sur la boîte de sélection lorsque la valeur est déjà attribué.
J'ai essayé ng-value="true" et ng-value="false" au lieu de juste valeur mais cela ne fonctionne pas ainsi.
- ngValue fonctionne très bien pour moi (testé sur Angulaire 1.6)
<select ng-model="$ctrl.request.invoiced" class="form-control input-lg"> <option ng-value="undefined">All</option> <option ng-value="false">Not Invoiced</option> <option ng-value="true">Invoiced</option> </select>
Vous devez vous connecter pour publier un commentaire.
EDIT: Intervenants ont souligné le fait que ma solution ne fonctionne pas comme le prétend. J'ai mis à jour la réponse à refléter la bonne réponse donnée par les autres ci-dessous (je ne peut pas supprimer un a accepté de répondre).
Angulaire 1.0.6, considérer ce HTML:
Et ce JavaScript:
Ici est un travail DÉMO Angulaire 1.0.6 et ici est un travail DÉMO Angulaire 1.3.14, ce qui est légèrement différent.
ng-repeat
ou personnalisé directive? Je devine que la<select>
existe dans un autre champ.<select ng-model="$ctrl.request.invoiced" class="form-control input-lg"> <option ng-value="undefined">All</option> <option ng-value="false">Not Invoiced</option> <option ng-value="true">Invoiced</option> </select>
Il suffit de faire comme ceci:
et de définir:
Pourquoi ne pas l'utiliser?
Je ne suis pas certain de la version angulaire cela est devenu pris en charge, mais vous pouvez maintenant utiliser le
ng-value
sur un élément option. Votre format html serait de travailler comme cela.Il travaille aussi à la radio et cases à cocher.
J'ai créé l'échantillon pour vous, veuillez vérifier cette out.
Est-il celui que vous souhaitez utiliser le modèle de lecteur de l'interface de liaison?
Je vous conseille d'utiliser une directive pour cela. Comme d'habitude, j'essaie de rester à l'écart de délais d'attente et autres opérations asynchrones, de préférence d'une plus grande autorité et le contrôle direct.
La priorité est définie spécifiquement, de sorte qu'il est effectué avant tout autres directives (qui n'ont généralement pas une priorité, et par défaut,
0
)Par exemple, j'ai utiliser cette directive (pour de vrai/faux de sélection) avec mon
selectpicker
directive qui enveloppe monselect
éléments dans leselectpicker
bootstrap plugin.Edit:
La mise en garde ici, j'ai oublié de mentionner, c'est que le html, les valeurs doivent être des valeurs de chaîne. Ce que la directive ne se traduit entre la vue et le modèle, en gardant la valeur de modèle dans
boolean
et votre point de vue dansstring
format:Ce sera trop de travail. Juste la force de la valeur booléenne en mettant angulaire, expression de la valeur.
J'ai eu très peu de succès avec ce problème frustrant. Ma solution, tout n'est pas aussi élégante puisque c'est une ligne de code supplémentaire, résolu à chaque fois. Cela peut ne pas fonctionner dans toutes les applications.
En le transformant en une "vraie" chaîne avant d'essayer de les relier au modèle affiché sur la page permis de sélectionner correctement la valeur.
Angulaire ne une stricte comparaison entre la Valeur lier à ng-modèle et les Valeurs dans les Options. Les Valeurs indiquées dans la Question initiale sont les Chaînes de caractères "faux" et "vrai".
Si la Valeur de ng-model est de Type bool et défini comme {"Valeur":false}, Angulars strict === comparaison entre la chaîne et le type bool n'a jamais de match, afin de choisir la boîte est vide.
Le vrai Problème est, si vous sélectionnez une Valeur, le Type a changé à partir de bool string ({"Valeur":false} --> {"Valeur":"false"})peut provoquer des erreurs si affiché de retour.
La meilleure Solution pour les deux questions pour moi a été l'un de Thiago Passos dans ce Post.
(https://stackoverflow.com/a/31636437/6319374)