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.