Operador ternario en plantillas AngularJS

¿Cómo se hace un ternario con AngularJS (en las plantillas)?

Sería bueno usar algunos atributos en html (clases y estilo) en lugar de crear y llamar a una función del controlador.

Author: starcorn, 2012-08-17
Source

7 answers

Actualización : Angular 1.1.5 agregó un operador ternario , por lo que ahora podemos simplemente escribir 

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

Si está utilizando una versión anterior de Angular, sus dos opciones son:

  1. (condition && result_if_true || !condition && result_if_false)
  2. {true: 'result_if_true', false: 'result_if_false'}[condition]

Tema 2. crea un objeto con dos propiedades. La sintaxis del array se utiliza para seleccionar la propiedad con name true o la propiedad con name false, y devolver el valor asociado.

Por ejemplo, 

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

First primero es establecer a true dentro de un ng-repeat para el primer elemento, por lo que lo anterior aplicaría las clases 'MyClass1' y 'MyClass2' solo la primera vez a través del bucle.

Con ng-class hay una manera más fácil sin embargo: ng-class toma una expresión que debe evaluar a uno de los siguientes:

  1. una cadena de nombres de clase delimitados por espacios
  2. una matriz de nombres de clase
  3. un mapa/objeto de nombres de clase a valores booleanos.

Se dio un ejemplo de 1) arriba. He aquí un ejemplo de 3, que creo que se lee mucho mejor: 

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

La primera vez a través de un bucle ng-repeat, se agrega la clase MyClass. La tercera vez (index index comienza en 0), se agrega otra clase.

Ng-style toma una expresión que debe evaluar a un mapa/objeto de nombres de estilo CSS a valores CSS. Por ejemplo, 

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>
 364
Author: Mark Rajcok,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-28 11:40:00

Actualización: Angular 1.1.5 se agregó un operador ternario, esta respuesta es correcta solo para las versiones anteriores a 1.1.5. Para la versión 1.1.5 y posteriores, consulte la respuesta actualmente aceptada.

Antes de Angular 1.1.5:

La forma de un ternario en angularjs es:

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

Un ejemplo sería:

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

O: 

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>
 85
Author: cricardol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-23 09:17:38

Para textos en plantilla angular (userType es propiedad de scope scope, como $scope.UserType):

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>
 16
Author: Ikrom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-10-14 11:46:49

Por ahora todos nos enteramos versión 1.1.5 viene con un ternario apropiado en la función $parse así que solo use esta respuesta como un ejemplo de filtros:

angular.module('myApp.filters', [])

  .filter('conditional', function() {
    return function(condition, ifTrue, ifFalse) {
      return condition ? ifTrue : ifFalse;
    };
  });

Y luego usarlo como

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>
 11
Author: Jan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-26 20:46:54

Ahí está: el operador ternario se agregó al analizador angular en 1.1.5! ver la lista de cambios

Aquí hay un fiddle que muestra el nuevo operador ternario utilizado en la directiva ng-class.

ng-class="boolForTernary ? 'blue' : 'red'"
 10
Author: lionroots,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-23 08:19:34

Mientras que puede usar la sintaxis condition && if-true-part || if-false-part en versiones anteriores de angular, el operador ternario habitual condition ? true-part : false-part está disponible en Angular 1.1.5 y posteriores.

 10
Author: Aleksander Blomskøld,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-23 08:56:20 
  <body ng-app="app">
  <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'"  class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
    <div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
      <div class="panel-heading">Take Quiz</div>
      <div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">

        <button type="button" class="btn btn-default">Start Quiz</button>
      </div>
    </div>
  </body>

Botón alternar y cambiar el encabezado del botón y mostrar/ocultar el panel div. Ver el Plunkr

 0
Author: Zahid Rahman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-02 17:06:43