Construction if-then-else en expression dans Angularjs

Question

Puis-je d'une manière ou d'une autre utiliser la construction if-then-else dans une expression angularjs, par exemple j'ai la fonction $scope.isExists(item) qui doit retourner une valeur bool. Je veux quelque chose comme ceci,

<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 renvoie une chaîne de caractères, mais je suis intéressé par la possibilité d'utiliser la construction if-then-else dans une expression. Merci.

Answer 1

Les expressions Angular ne prennent pas en charge l'opérateur ternaire avant la version 1.1.5, mais il peut être émulé de la manière suivante :

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

Ainsi, dans l'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>

UPDATE : Angular 1.1.5 a ajouté la prise en charge des opérateurs ternaires :

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

Answer 2

Vous pouvez utiliser l'opérateur ternaire depuis la version 1.2.x et plus, comme le montre cette petite démonstration. plunker :

Pour des raisons historiques (peut-être que plnkr.co va tomber pour une raison quelconque dans le futur) Voici le code principal de mon exemple :

{{true?true:false}}

Answer 3

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>

Answer 4

Vous pouvez simuler un opérateur ternaire comme celui-ci :

{true:THIS, false:THAT}[CONDITION]

C'est ainsi que vous l'utiliseriez dans votre cas particulier :

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