web-dev-qa-db-fra.com

Angularjs si-alors-sinon construction dans l'expression

Puis-je utiliser en quelque sorte la construction if-then-else (opérateur ternaire) dans l'expression angularjs, par exemple, j'ai la fonction $ scope.isExists (item) qui doit renvoyer une valeur bool. Je veux quelque chose comme ça,

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) ? 'available' : 'oh no, you don't have it'}}</div>
</div>

Je sais que je peux utiliser une fonction qui retourne une chaîne, la possibilité d'utiliser une construction if-then-else dans une expression est intéressante. Merci.

javascriptangularjsif-statementangularjs-ng-repeatternary-operator
107
IgorCh

Les expressions angulaires ne supportent pas l'opérateur ternaire avant la 1.1.5, mais il peut être imité comme ceci:

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

Donc, par exemple, quelque chose comme ceci fonctionnerait:

<div ng-repeater="item in items">
    <div>{{item.description}}</div>
    <div>{{isExists(item) && 'available' || 'oh no, you don't have it'}}</div>
</div>

PDATE: Angular 1.1.5 support ajouté pour les opérateurs ternaires:

{{myVar === "two" ? "it's true" : "it's false"}}
216
Andre Goncalves

Vous pouvez utiliser l'opérateur ternaire à partir de la version 1.1.5 et ultérieure, comme indiqué dans ce petit plunker (exemple en 1.1.5):

Pour des raisons historiques (peut-être que plnkr.co sera abaissé pour une raison ultérieure) , voici le code principal de mon exemple:

{{true?true:false}}
38
Sebastian

Vous pouvez facilement utiliser ng-show tel que:

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-show="isExists(item)">available</div>
        <div ng-show="!isExists(item)">oh no, you don't have it</div>
    </div>

Pour des tests plus complexes, vous pouvez utiliser les instructions ng-switch:

    <div ng-repeater="item in items">
        <div>{{item.description}}</div>
        <div ng-switch on="isExists(item)">
            <span ng-switch-when="true">Available</span>
            <span ng-switch-default>oh no, you don't have it</span>
        </div>
    </div>
25
Mickael

Cela peut être fait en une seule ligne.

{{corretor.isAdministrador && 'YES' || 'NÂO'}}

Utilisation dans une balise td:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
0
Consule