Angularjs construcción if-then-else en expresión


109

¿Puedo de alguna manera usar la construcción if-then-else (operador ternario) en la expresión angularjs, por ejemplo, tengo la función $ scope.isExists (item) que tiene que devolver un valor bool. Quiero algo como esto,

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

Sé que puedo usar la función que devuelve una cadena, me interesa la posibilidad de usar la construcción if-then-else en la expresión. Gracias.


3
Salidang-switch
NilsH

3
Desde 1.2 esto ahora es compatible.
nilskp

Respuestas:


219

Las expresiones angulares no admiten el operador ternario antes de 1.1.5, pero se puede emular así:

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

Entonces, en ejemplo, algo como esto funcionaría:

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

ACTUALIZACIÓN: Angular 1.1.5 agregó soporte para operadores ternarios:

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

¿&& necesita escapar?
0xcaff

@caffinatedmonkey no, no debes hacerlo. Podría (si es posible para su proyecto) usar el operador ternario como expliqué en mi respuesta a la pregunta del tema.
Sebastian

@Sebastian ¿ <Y >como operadores de comparación?
0xcaff

@caffinatedmonkey No hay problema también, {{1> 0? true: false}} o {{1> 0}} lo que quieras. {{1> 0}} también funciona en 1.0.8, pero el operador ternario no.
Sebastian

Esta sigue siendo una gran respuesta, ya que funciona dentro de la configuración de los componentes de interfaz de usuario angular (mientras que el operador ternario no funciona allí por alguna razón). Quizás esto ayude a alguien que está luchando por establecer parámetros de interfaz de
usuario

39

Puede usar el operador ternario desde la versión 1.1.5 y superior como se demuestra en este pequeño plunker (ejemplo en 1.1.5):

Por razones históricas (tal vez plnkr.co baje por alguna razón en el futuro) aquí está el código principal de mi ejemplo:

{{true?true:false}}

Por razones históricas (tal vez plnkr.co baje por alguna razón en el futuro) aquí está el código principal de mi ejemplo:{{true?true:false}}
Sebastian

1
Exactamente lo que estaba buscando gracias, casi usé un filtro para hacer esto.
Immutable Brick

1
@IgorCh: Es posible que desee actualizar la respuesta aceptada :)
Răzvan Flavius ​​Panda

25

Puede usar ng-show fácilmente 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 pruebas más complejas, puede usar declaraciones 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>

Una ventaja de hacerlo a nivel de elemento como este en lugar de dentro de la expresión es que puedes personalizar mucho más el estilo y contenido de las diferentes opciones.
Supr

Sí, sé que esta funcionalidad podría ayudar, pero no quiero agregar div extra al documento. pero también gracias
IgorCh

0

Esto se puede hacer en una línea.

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

Uso en una tdetiqueta:

<td class="text-center">{{corretor.isAdministrador && 'Sim' || 'Não'}}</td>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.