Opérateur ternaire dans les modèles AngularJS

Comment faites-vous un ternaire avec AngularJS (dans les templates)?

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

Related of "Opérateur ternaire dans les modèles AngularJS"

Mise à jour : Angular 1.1.5 a ajouté un opérateur ternaire , maintenant nous pouvons simplement écrire


  • Si vous utilisez une version antérieure d’Angular, 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]

    L’élément 2. ci-dessus crée un object avec deux propriétés. La syntaxe de tableau est utilisée pour sélectionner la propriété avec le nom true ou la propriété avec le nom false et renvoyer la valeur associée.

    Par exemple,

     
  • ...
  • or
  • ...
  • $ first est défini sur true dans un ng-repeat pour le premier élément, donc ce qui précède appliquerait la classe ‘myClass1’ et ‘myClass2’ uniquement la première fois dans la boucle.

    Avec ng-class, il existe un moyen plus simple: ng-class prend une expression qui doit être évaluée comme suit:

    1. une chaîne de noms de classe séparés par des espaces
    2. un tableau de noms de classe
    3. une carte / object de noms de classes à des valeurs booléennes.

    Un exemple de 1) a été donné ci-dessus. Voici un exemple de 3, que je pense lire beaucoup mieux:

      
  • ...
  • La première fois à travers une boucle ng-repeat, la classe myClass est ajoutée. La troisième fois ($ index commence à 0), la classe anotherClass est ajoutée.

    ng-style prend une expression qui doit évaluer une map / un object de noms de styles CSS en valeurs CSS. Par exemple,

      
  • ...
  • Mise à jour: Angular 1.1.5 a ajouté un opérateur ternaire, cette réponse est correcte uniquement pour les versions précédant 1.1.5. Pour la version 1.1.5 et ultérieure, consultez la réponse actuellement acceptée.

    Avant Angular 1.1.5:

    La forme d’un ternaire dans angularjs est:

     ((condition) && (answer if true) || (answer if false)) 

    Un exemple serait:

      

    ou:

      
  • < <
  • Pour les textes dans un modèle angular ( userType est la propriété de $ scope, comme $ scope.userType):

      {{userType=='admin' ? 'Edit' : 'Show'}}  

    A présent, nous avons tous découvert que la version 1.1.5 est fournie avec un ternaire approprié dans la fonction $parse . Utilisez donc cette réponse comme exemple de filtre:

     angular.module('myApp.filters', []) .filter('conditional', function() { return function(condition, ifTrue, ifFalse) { return condition ? ifTrue : ifFalse; }; }); 

    Et puis l’utiliser comme

      

    Voilà: l’opérateur ternaire a été ajouté à l’parsingur angular en 1.1.5 ! voir le changelog

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

     ng-class="boolForTernary ? 'blue' : 'red'" 

    Bien que vous puissiez utiliser la condition && if-true-part || if-false-part condition && if-true-part || if-false-part -syntax dans les anciennes versions d’angular, la condition ? true-part : false-part opérateur ternaire habituelle condition ? true-part : false-part condition ? true-part : false-part est disponible dans Angular 1.1.5 et versions ultérieures .

        
    Take Quiz

    Bouton bascule et change l’en-tête du bouton et affiche / masque le panneau div. Voir le Plunkr