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.

IgorCh
fonte
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"}}
Andre Gonçalves
fonte
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}}
Sebastian
fonte
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>
Mickael
fonte
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>
Cônsula
fonte