condicionales en línea en angular.js

Me preguntaba si hay una forma de mostrar de forma angular contenido condicionalmente distinto de usar ng-show, etc. Por ejemplo, en backbone.js podría hacer algo con contenido en línea en una plantilla como:

 show this 

pero en angular, parezco estar limitado a mostrar y esconder cosas envueltas en tags html

 

I'm hidden

I'm shown

¿Cuál es la forma recomendada en angular para mostrar y ocultar de forma condicional el contenido en línea con solo {{}} en lugar de envolver el contenido en tags html?

EDIT: ¡la respuesta de 2Toad a continuación es lo que estás buscando! Vota a favor esa cosa

Si usa Angular <= 1.1.4, entonces esta respuesta hará:

Una respuesta más para esto. Estoy publicando una respuesta por separado, porque es más un bash “exacto” de solución que una lista de posibles soluciones:

Aquí hay un filtro que hará un “inmediato si” (también conocido como iif):

 app.filter('iif', function () { return function(input, trueValue, falseValue) { return input ? trueValue : falseValue; }; }); 

y puede usarse así:

 {{foo == "bar" | iif : "it's true" : "no, it's not"}} 

Angular 1.1.5 agregó soporte para operadores ternarios:

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

Miles de formas de despellejar a este gato. Me doy cuenta de que estás preguntando entre {{}} específicamente, pero para otros que vienen aquí, creo que vale la pena mostrar algunas de las otras opciones.

función en su $ scope (IMO, esta es su mejor apuesta en la mayoría de los escenarios):

  app.controller('MyCtrl', function($scope) { $scope.foo = 1; $scope.showSomething = function(input) { return input == 1 ? 'Foo' : 'Bar'; }; }); {{showSomething(foo)}} 

ng-show y ng-hide por supuesto:

  FooBar 

ngSwitch

  
Foo Bar What?

Un filtro personalizado como Bertrand sugirió. (esta es su mejor opción si tiene que hacer lo mismo una y otra vez)

 app.filter('myFilter', function() { return function(input) { return input == 1 ? 'Foo' : 'Bar'; } } {{foo | myFilter}} 

O una directiva personalizada:

 app.directive('myDirective', function() { return { restrict: 'E', replace: true, link: function(scope, elem, attrs) { scope.$watch(attrs.value, function(v) { elem.text(v == 1 ? 'Foo': 'Bar'); }); } }; });  

Personalmente, en la mayoría de los casos, voy con una función en mi scope, mantiene el marcado bastante limpio y es rápido y fácil de implementar. A menos que, es decir, vayas a hacer exactamente lo mismo una y otra vez, en cuyo caso iré con la sugerencia de Bertrand y crearé un filtro o posiblemente una directiva, dependiendo de las circunstancias.

Como siempre, lo más importante es que su solución es fácil de mantener y, con suerte, se puede probar. Y eso dependerá completamente de tu situación específica.

Estoy usando lo siguiente para configurar condicionalmente la clase attr cuando ng-class no se puede usar (por ejemplo, al diseñar SVG):

 ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}" 

El mismo enfoque debería funcionar para otros tipos de atributos.

(Creo que necesitas estar en el último Angular inestable para usar ng-attr-, actualmente estoy en 1.1.4)

He publicado un artículo sobre cómo trabajar con AngularJS + SVG que habla sobre este y otros temas relacionados. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

Para verificar un contenido variable y tener un texto predeterminado, puede usar:

 {{myVar || 'Text'}} 

Si te entendí bien, creo que tienes dos formas de hacerlo.

Primero podrías probar ngSwitch y la segunda forma sería crear tu propio filtro . Probablemente ngSwitch es el enfoque correcto, pero si quieres ocultar o mostrar contenido en línea simplemente usando {{}} el filtro es el camino a seguir.

Aquí hay un violín con un filtro simple como ejemplo.

 


{{greeting|isHello}}

angular.module('exapleOfFilter', []). filter('isHello', function() { return function(input) { // conditional you want to apply if (input === 'hello') { return input; } return ''; } }); function Ctrl($scope) { $scope.greeting = 'hello'; }

La biblioteca de UI angular tiene una directiva incorporada ui-if para la condición en template / Views upto ui angular 1.1.4

Ejemplo: soporte en UI angular upto ui 1.1.4

 

ng: si está disponible en toda la versión angular después de 1.1.4

 

si tiene datos en la variable de matriz, solo aparecerá el div

Así que con Angular 1.5.1 (tenía la dependencia de la aplicación existente en otras dependencias de la stack MEAN es por qué no estoy usando 1.6.4)

Esto funciona para mí como OP diciendo {{myVar === "two" ? "it's true" : "it's false"}} {{myVar === "two" ? "it's true" : "it's false"}}

 {{vm.StateName === "AA" ? "ALL" : vm.StateName}} 

Funciona incluso en situaciones exóticas:

 

si desea mostrar “Ninguno” cuando el valor es “0”, puede usar como:

  {{ $scope.amount === "0" ? $scope.amount : "None" }}  

o verdadero falso en js angulares

  {{ $scope.amount === "0" ? "False" : "True" }}  

Yo arrojaré el mío en la mezcla:

https://gist.github.com/btm1/6802312

esto evalúa la sentencia if una vez y no agrega un detector de escucha PERO puede agregar un atributo adicional al elemento que tiene el conjunto -si se llama wait-for = “somedata.prop” y esperará a que esos datos o propiedades se establezcan antes evaluando la statement if una vez. ese atributo adicional puede ser muy útil si está esperando datos de una solicitud XHR.

 angular.module('setIf',[]).directive('setIf',function () { return { transclude: 'element', priority: 1000, terminal: true, restrict: 'A', compile: function (element, attr, linker) { return function (scope, iterStartElement, attr) { if(attr.waitFor) { var wait = scope.$watch(attr.waitFor,function(nv,ov){ if(nv) { build(); wait(); } }); } else { build(); } function build() { iterStartElement[0].doNotMove = true; var expression = attr.setIf; var value = scope.$eval(expression); if (value) { linker(scope, function (clone) { iterStartElement.after(clone); clone.removeAttr('set-if'); clone.removeAttr('wait-for'); }); } } }; } }; });