Réponses:
Mise à jour : Angular 1.1.5 a ajouté un opérateur ternaire , donc maintenant nous pouvons simplement écrire
<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">
Si vous utilisez une version antérieure d'Angular, vos deux choix sont:
(condition && result_if_true || !condition && result_if_false)
{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 du tableau est utilisée pour sélectionner la propriété portant le nom true ou la propriété portant 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 une répétition ng pour le premier élément, donc ce qui précède n'appliquerait les classes 'myClass1' et 'myClass2' que la première fois dans la boucle.
Avec la classe ng, il existe un moyen plus simple: la classe ng prend une expression qui doit correspondre à l'une des valeurs suivantes:
Un exemple de 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 dans une boucle ng-repeat, la classe myClass est ajoutée. La 3ème fois ($ index commence à 0), la classe anotherClass est ajoutée.
ng-style prend une expression qui doit s'évaluer en une carte / un objet de noms de style CSS en valeurs CSS. Par exemple,
<li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>
ng-style
à jour, mais il ne semble être évalué que lorsque l'élément est rendu pour la première fois. (Noob angulaire ici)
Mise à jour: Angular 1.1.5 a ajouté un opérateur ternaire, cette réponse est correcte uniquement pour les versions antérieures à 1.1.5. Pour 1.1.5 et versions ultérieures, voir 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:
<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>
À présent, nous avons tous découvert que la version 1.1.5 est livrée avec un ternaire approprié dans la $parse
fonction, utilisez simplement 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 utilisez-le comme
<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>
Voilà: l'opérateur ternaire a été ajouté à l'analyseur angulaire dans 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
syntaxe -sync 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 .
<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 modifie l'en-tête du bouton et affiche / masque le panneau div. Voir le Plunkr