Construction angularjs if-then-else dans l'expression


109

Puis-je en quelque sorte utiliser la construction if-then-else (ternary-operator) dans l'expression angularjs, par exemple j'ai la fonction $ scope.isExists (item) qui doit renvoyer une 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 une fonction qui retourne une chaîne, je suis intéressé par la possibilité d'utiliser la construction if-then-else dans l'expression. Merci.


3
Départng-switch
— NilsH

3
Depuis la version 1.2, cela est désormais pris en charge.
— nilskp

Réponses:


219

Les expressions angulaires ne prennent pas en charge l'opérateur ternaire avant la version 1.1.5, mais il peut être émulé comme ceci:

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

Donc, par exemple, quelque chose comme ça 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: Angular 1.1.5 a ajouté la prise en charge des opérateurs ternaires:

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

Est-ce que && doit être échappé?
— 0xcaff

@caffinedmonkey non, vous ne devez pas. Vous pouvez (si possible pour votre projet) utiliser l'opérateur ternaire comme je l'ai expliqué dans ma réponse à la question du sujet.
— Sebastian

@Sebastian Qu'en est-il <et en >tant qu'opérateurs de comparaison?
— 0xcaff

@caffinatedmonkey Pas de problème également, {{1> 0? true: false}} ou {{1> 0}} tout ce que vous voulez. {{1> 0}} fonctionne également dans la version 1.0.8, mais pas l'opérateur ternaire.
— Sebastian

C'est toujours une excellente réponse car cela fonctionne dans les paramètres des composants angular-ui (alors que l'opérateur ternaire ne fonctionne pas là pour une raison quelconque). Peut-être que cela aide quelqu'un qui a du mal à définir les paramètres angular-ui
— Olga Gnatenko

39

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

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

{{true?true:false}}

Pour des raisons historiques (peut-être plnkr.co descendre pour une raison quelconque à l'avenir) voici le code principal de mon exemple:{{true?true:false}}
— Sebastian

1
Exactement ce que je cherchais merci, presque utilisé un filtre pour ce faire.
— Immutable Brick

1
@IgorCh: Vous voudrez peut-être mettre à jour la réponse acceptée :)
— Răzvan Flavius ​​Panda

25

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 des 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>

Un avantage de le faire au niveau de l'élément comme celui-ci plutôt qu'à l'intérieur de l'expression est que vous pouvez beaucoup plus personnaliser le style et le contenu des différentes options.
— Supr

Oui, je connais cette fonctionnalité, cela pourrait aider, mais je ne veux pas ajouter de div supplémentaire au document. mais aussi merci
— IgorCh

0

Cela peut être fait en une seule ligne.

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

Utilisation dans une tdbalise:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.