Un ternaire dans les modèles

Question

Comment voulez-vous faire un ternaire avec AngularJS (dans les modèles) ?

Ce serait bien d’utiliser certains attributs html (classes et style) au lieu de créer et d’appeler une fonction du contrôleur.

Answer 1

Mise à jour: Angulaire 1.1.5 ajouté un opérateur ternaire, et nous pouvons donc écrire tout simplement

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

---

Si vous utilisez une version antérieure de Anguleuses, vos deux choix sont les suivants:

1. (condition && result_if_true || !condition && result_if_false)
2. {true: 'result_if_true', false: 'result_if_false'}[condition]

article 2. ci-dessus crée un objet avec les deux propriétés. La syntaxe de tableau est utilisé pour sélectionner la propriété avec le nom vrai ou le bien avec le nom de faux, et de retourner la valeur associée.

E. g.,

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

$premier est la valeur true à l'intérieur d'une ng-repeat pour le premier élément, de sorte que le ci-dessus s'appliquent de la classe de myClass1 " et "myClass2" seulement la première fois dans la boucle.

Avec ng-classe il y a un moyen plus facile si: ng-classe prend une expression qui doit correspondre à l'une des opérations suivantes:

1. une chaîne de caractères de l'espace délimité par les noms de classe
2. un tableau de noms de classe
3. une carte/un objet de la classe des noms à des valeurs booléennes.

Un exemple d'1) a été donné ci-dessus. Voici un exemple de 3, qui, je pense, se lit beaucoup mieux:

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

La première fois par le biais d'un ng-repeat boucle, de la classe myClass est ajouté. La 3ème fois à travers ($index commence à 0), classe anotherClass est ajouté.

ng-style prend une expression qui doit correspondre à une carte/objet de la CSS noms de style CSS valeurs. E. g.,

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

Answer 2

La forme d’un ternaire dans angularjs est :

((condition) & & (répondre si elle est vraie) || (réponse si faux))

Un exemple serait :

ou :

Answer 3

Par maintenant que nous avons tous découvert version 1.1.5 est livré avec un bon ternaire dans le `` fonction suffit donc utiliser cette réponse comme un exemple de filtres :

Et ensuite l’utiliser comme

Answer 4

Alors que vous pouvez utiliser le -syntaxe dans les anciennes versions d’angulaire, l’opérateur ternaire habituel est disponible dans angulaire 1.1.5 et plus tard.

Answer 5

Ça y est : opérateur ternaire suis ajouté à analyseur angulaire en 1.1.5! Voir le changelog

Voici un violon montrant nouvel opérateur ternaire utilisée dans la directive de ng-classe.