web-dev-qa-db-fra.com

Opérateur ternaire dans les modèles AngularJS

Comment faites-vous une ternaire avec AngularJS (dans les modèles)?

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

javascripthtmlangularjsternary-operator
235
cricardol

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

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

Si vous utilisez une version antérieure de 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 objet 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.,

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

$ first est défini sur true dans un ng-repeat pour le premier élément. Par conséquent, l'élément ci-dessus n'appliquerait que les classes 'myClass1' et 'myClass2' uniquement lors de la première boucle.

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

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

Un exemple de 1) a été donné ci-dessus. Voici un exemple de 3 qui, à mon avis, se lit beaucoup mieux:

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

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

ng-style prend une expression qui doit être évaluée en tant que carte/objet de noms de style CSS en valeurs CSS. Par exemple.,

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

Mise à jour: Angular 1.1.5 ajouté un opérateur ternaire, cette réponse est correcte uniquement pour les versions antérieures à 1.1.5. Pour 1.1.5 et les versions ultérieures, voir la réponse actuellement acceptée.

Avant Angular 1.1.5:

La forme d'un ternaire en angularjs est:

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

Un exemple serait:

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

ou:

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>
86
cricardol

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

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>
22
Ikrom

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

angular.module('myApp.filters', [])

  .filter('conditional', function() {
    return function(condition, ifTrue, ifFalse) {
      return condition ? ifTrue : ifFalse;
    };
  });

Et puis l'utiliser comme

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>
11
Jan

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

10
Aleksander Blomskøld

Voilà: l'opérateur ternaire a été ajouté à angular analyseur dans 1.1.5 ! voir le changelog

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

ng-class="boolForTernary ? 'blue' : 'red'"
10
lionroots
  <body ng-app="app">
  <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'"  class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
    <div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
      <div class="panel-heading">Take Quiz</div>
      <div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">

        <button type="button" class="btn btn-default">Start Quiz</button>
      </div>
    </div>
  </body>

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

0
Zahid Rahman