Construção de angularjs if-then-else na expressão


109

Posso de alguma forma usar a construção if-then-else (operador ternário) na expressão angularjs, por exemplo, tenho a função $ scope.isExists (item) que deve retornar o valor bool. Eu quero algo assim,

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

Eu sei que posso usar uma função que retorna string, estou interessado na possibilidade de usar a construção if-then-else na expressão. Obrigado.


3
Confirang-switch
NilsH

3
Desde 1.2 agora é suportado.
nilskp

Respostas:


219

As expressões angulares não suportam o operador ternário antes de 1.1.5, mas pode ser emulado assim:

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

Então, por exemplo, algo assim funcionaria:

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

ATUALIZAÇÃO: Angular 1.1.5 adicionou suporte para operadores ternários:

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

O && precisa ser escapado?
0xcaff

@caffinatedmonkey não, você não deve. Você poderia (se possível para o seu projeto) usar o operador ternário como expliquei em minha resposta à pergunta do tópico.
Sebastian

@Sebastian E sobre <e >como operadores de comparação?
0xcaff

@caffinatedmonkey Também não tem problema, {{1> 0? true: false}} ou {{1> 0}} o que você quiser. {{1> 0}} funciona também em 1.0.8, mas o operador ternário não.
Sebastian

Esta ainda é uma ótima resposta, pois funciona dentro das configurações dos componentes angular-ui (enquanto o operador ternário não funciona lá por algum motivo). Talvez isso ajude alguém com dificuldade para definir os parâmetros angular-ui
Olga Gnatenko

39

Você pode usar o operador ternário desde a versão 1.1.5 e acima como demonstrado neste pequeno êmbolo (exemplo em 1.1.5):

Por motivos de história (talvez plnkr.co baixe por algum motivo no futuro) aqui está o código principal do meu exemplo:

{{true?true:false}}

Por motivos de história (talvez plnkr.co baixe por algum motivo no futuro) aqui está o código principal do meu exemplo:{{true?true:false}}
Sebastian

1
Exatamente o que estava procurando obrigado, quase usei um filtro para fazer isso.
Immutable Brick

1
@IgorCh: Você pode querer atualizar a resposta aceita :)
Răzvan Flavius ​​Panda

25

Você pode usar facilmente o ng-show, como:

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

Para testes mais complexos, você pode usar as instruções 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>

Uma vantagem de fazer isso no nível do elemento como este, em vez de dentro da expressão, é que você pode personalizar muito mais o estilo e o conteúdo das diferentes opções.
Supr de

Sim, eu sei que essa funcionalidade pode ajudar, mas não quero adicionar div extra ao documento. mas também obrigado
IgorCh

0

Isso pode ser feito em uma linha.

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

Uso em uma tdtag:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.