Un ternario en las plantillas

355

actualización: 1.1.5 angular añadió una ternary operator, 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:

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

elemento 2. anterior crea un objeto con dos propiedades. La sintaxis de matriz se utiliza para seleccionar la propiedad con el nombre verdadero o la propiedad con el nombre falso, 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>

$ primero se establece en verdadero dentro de un ng de repetición para el primer elemento, por lo que el mencionado anteriormente se aplicará clase 'MyClass1' y 'miclase2' sólo la primera vez a través del bucle.

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

una serie de nombres de clase delimitados por espacios
una matriz de nombres de clase
un mapa/objeto de nombres de clase a valores booleanos.

Un ejemplo de 1) se proporcionó anteriormente. Aquí es un ejemplo de 3, que creo que lee mucho mejor:

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

La primera vez a través de un bucle ng de repetición, se añade myClass clase. La tercera vez ($ index comienza en 0), se agrega la clase anotherClass.

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

<li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

Fuente

2012-08-28 00:59:06

+5

¡Si pudiera, le volvería a votar para actualizar la pregunta! – Narretz

+2

Me ocuparé de ello, @Narretz. –

+1

En el ejemplo de acceso a la clave de objeto, puede omitir la clave 'falsa', ya que de todos modos está vacía. – 0xc0de

84

Actualización: Angular 1.1.5 agregó un operador ternario, esta respuesta es correcta solo a las versiones anteriores a 1.1.5. Para 1.1.5 y posterior, vea la respuesta actualmente aceptada.

Antes 1.1.5 Angular:

la forma de un ternario en AngularJS es:

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

Un ejemplo podría ser:

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

Fuente

2012-08-17 15:20:25 cricardol

+1

Weird. Eso no es muy intuitivo. Me pregunto por qué fue implementado de esta manera. –

+4

Ternary nunca se implementó, pero esto solo está usando los operadores binarios de la manera en que funcionan. –

+18

@blesh, AngularJS promueve la capacidad de prueba. Las plantillas no deben contener ninguna lógica. Un operador ternario en una plantilla se debe refactorizar a una llamada de función al controlador, para una mejor comprobabilidad. –

11

A estas alturas todos descubrimos versión 1.1.5 viene con un ternaria adecuada en la función $parse tan sólo tiene que utilizar 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>

Fuente

2013-01-16 12:21:59 Jan

+2

Llegué a esta pregunta para el operador ternario, pero al final fui con un filtro y me sentí muy bien ... = D – slacktracer

10

Si bien se puede utilizar el -Sintaxis condition && if-true-part || if-false-part en versiones anteriores de angular, el operador ternario habitual condition ? true-part : false-part se pue ble en Angular 1.1.5 and later.

Fuente

2013-05-19 09:20:11

10

Ahí está: el operador ternario se agregó al analizador angular en 1.1.5! see the changelog

Here is a fiddle que muestra el nuevo operador ternario utilizado en la directiva ng-class.

ng-class="boolForTernary ? 'blue' : 'red'"

Fuente

2013-05-23 08:19:34 lionroots

14

Para los textos en la plantilla angular (userType es característica de $ ámbito de aplicación, así como $ scope.userType):

<span> 
    {{userType=='admin' ? 'Edit' : 'Show'}} 
</span>

Fuente

2015-10-14 11:46:49 Ikrom

0

<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 de alternancia y la cabecera de cambio de botón y mostrar/ocultar panel de div . Ver el Plunkr

Fuente

2016-04-02 16:43:07

Un ternario en las plantillas

Respuesta

Cuestiones relacionadas