Operador ternario en plantillas AngularJS

Solución:

Actualizar: 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]

el elemento 2. anterior crea un objeto con dos propiedades. La sintaxis de matriz se utiliza para seleccionar la propiedad con nombre verdadero o la propiedad con nombre falso y devolver el valor asociado.

P.ej,

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

$ first se establece en verdadero dentro de una repetición ng para el primer elemento, por lo que lo anterior aplicaría la clase ‘myClass1’ y ‘myClass2’ solo la primera vez a través del ciclo.

Con clase ng Sin embargo, hay una manera más fácil: ng-class toma una expresión que debe evaluarse como una de las siguientes:

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

Anteriormente se dio un ejemplo de 1). Aquí hay 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 hasta ($ index comienza en 0), se agrega la clase anotherClass.

estilo ng toma una expresión que debe evaluar a un mapa / objeto de nombres de estilo CSS a valores CSS. P.ej,

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

Actualizar: Angular 1.1.5 agregó un operador ternario, esta respuesta es correcta solo para las versiones anteriores a 1.1.5. Para 1.1.5 y versiones 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="https://foroayuda.es/#/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>

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

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

---

---

Utiliza Nuestro Buscador