javascript - operator - if ternario angular
Operador ternario en plantillas AngularJS (7)
A estas alturas, todos descubrimos que la versión 1.1.5 viene con un ternario adecuado 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>
¿Cómo se hace ternario con AngularJS (en las plantillas)?
Sería bueno usar algunos atributos html (clases y estilo) en lugar de crear y llamar a una función del controlador.
Ahí está: ¡el operador ternario se agregó al analizador angular en 1.1.5 ! ver el registro de cambios
Aquí hay un violín que muestra el nuevo operador ternario utilizado en la directiva ng-class.
ng-class="boolForTernary ? ''blue'' : ''red''"
Para textos en plantilla angular ( userType es propiedad de $ scope, como $ scope.userType):
<span>
{{userType==''admin'' ? ''Edit'' : ''Show''}}
</span>
Si bien puede usar la condition && if-true-part || if-false-part condition && if-true-part || if-false-part -syntax en versiones anteriores de angular, la condition ? true-part : false-part ternaria habitual del operador condition ? true-part : false-part condition ? true-part : false-part está disponible en 1.1.5 versiones 1.1.5 .
Actualización: 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, vea la respuesta actualmente aceptada.
Antes 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>
Actualización : Angular 1.1.5 agregó un operador ternario , así 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]
El artículo 2. anterior crea un objeto con dos propiedades. La sintaxis de la matriz se usa para seleccionar la propiedad con el nombre verdadero o la propiedad con el 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 true 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 bucle.
Sin embargo, con ng-class hay una forma más fácil: ng-class toma una expresión que debe evaluar a uno de los siguientes:
- una cadena 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) fue dado arriba. 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 de repetición ng, se agrega la clase myClass. La tercera vez que pasa ($ index comienza en 0), se agrega la clase anotherClass.
ng-style toma una expresión que debe evaluar un mapa / objeto de nombres de estilo CSS a valores CSS. P.ej,
<li ng-style="{true: {color: ''red''}, false: {}}[$first]">...</li>
<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 para cambiar y cambiar el encabezado del botón y mostrar / ocultar el panel div. Ver el Plunkr