Angularjs si-alors-sinon de la construction dans l'expression

puis-je utiliser d'une façon ou d'une autre la construction si-then-else (ternary-operator) dans l'expression angularjs, par exemple j'ai la fonction $scope.isExists(item) qui doit retourner à la valeur booléenne. 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 la fonction qui renvoie la chaîne, je suis intéressant dans la possibilité d'utiliser la construction si-alors-autrement dans l'expression. Grâce.

106
demandé sur Sebastian 2013-05-16 13:57:23

3 réponses

les expressions angulaires ne supportent pas l'opérateur ternaire avant 1.1.5, mais elles peuvent être émulées comme ceci:

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

ainsi, 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>

mise à JOUR: Angulaire 1.1.5 ajout du support pour les opérateurs ternaires:

{{myVar === "two" ? "it's true" : "it's false"}}
204
répondu Andre Goncalves 2014-10-29 18:43:01

vous pouvez utiliser l'opérateur ternaire depuis la version 1.1.5 et plus comme démontré dans ce petit plunker (exemple 1.1.5):

Pour l'histoire des raisons de (peut-être plnkr.co descendre pour quelque raison dans l'avenir) voici le code principal de mon exemple:

{{true?true:false}}
37
répondu Sebastian 2017-03-28 07:37:47

vous pouvez facilement utiliser ng-show comme:

    <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
répondu Mickael 2013-05-16 10:04:41