condicionales en línea en angular.js

Me preguntaba si hay una forma en angular para mostrar contenido condicional que no sea ng-show, etc. Por ejemplo, en backbone.js podría hacer algo con contenido en línea en una plantilla como:

<% if (myVar === "two") { %> show this<% } %>

pero en angular, parece que estoy limitado a mostrar y ocultar cosas envueltas en etiquetas html

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

¿Cuál es la forma recomendada en angular para mostrar y ocultar condicionalmente el contenido en línea en angular simplemente usando {{}} en lugar de envolver el contenido en etiquetas html?

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

Si está utilizando Angular <= 1.1.4, esta respuesta servirá:

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

Aquí hay un filtro que hará un "if inmediato" (también conocido como iif):

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

y se puede usar 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 pelar 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.

funciona en tu $ scope (IMO, esta es tu 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';
      };
   });

 <span>{{showSomething(foo)}}</span>

ng-show y ng-hide, por supuesto:

 <span ng-show="foo == 1">Foo</span><span ng-hide="foo == 1">Bar</span>

ngSwitch

 <div ng-switch on="foo">
   <span ng-switch-when="1">Foo</span>
   <span ng-switch-when="2">Bar</span>
   <span ng-switch-default>What?</span>
 </div>

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');
       });
     }
   };
});


<my-directive value="foo"></my-directive>

Personalmente, en la mayoría de los casos, iría con una función en mi alcance, mantiene el marcado bastante limpio, y es rápido y fácil de implementar. A menos que, va a hacer exactamente lo mismo una y otra vez, en cuyo caso iría con la sugerencia de Bertrand y crearía 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 es de esperar que sea comprobable. Y eso va a depender completamente de su situación específica.

Estoy usando lo siguiente para configurar condicionalmente la clase attr cuando no se puede usar ng-class (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:

<span>{{myVar || 'Text'}}</span>

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

Primero, puede probar ngSwitch y la segunda forma posible sería crear su propio filtro . Probablemente ngSwitch es el enfoque correcto, pero si desea ocultar o mostrar contenido en línea, simplemente usar el filtro {{}} es el camino a seguir.

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

<div ng-app="exapleOfFilter">
  <div ng-controller="Ctrl">
    <input ng-model="greeting" type="greeting">
      <br><br>
      <h1>{{greeting|isHello}}</h1>
  </div>
</div>

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 IU angular tiene una directiva integrada ui-if para la condición en la plantilla / Vistas hasta ui angular 1.1.4

Ejemplo: soporte en IU angular hasta ui 1.1.4

<div ui-if="array.length>0"></div>

ng-si está disponible en todas las versiones angulares después de 1.1.4

<div ng-if="array.length>0"></div>

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

Entonces, con Angular 1.5.1 (tenía una dependencia de aplicación existente en algunas otras dependencias de la pila MEAN, es por eso que actualmente no estoy usando 1.6.4)

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

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

si desea mostrar "Ninguno" cuando el valor es "0", puede usarlo como:

<span> {{ $scope.amount === "0" ?  $scope.amount : "None" }} </span>

o verdadero falso en angular js

<span> {{ $scope.amount === "0" ?  "False" : "True" }} </span>

Funciona incluso en situaciones exóticas:

<br ng-show="myCondition == true" />

Tiraré el mío en la mezcla:

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

esto evalúa la instrucción if una vez y no agrega watch listener PERO puede agregar un atributo adicional al elemento que tiene el set-if llamado wait-for = "somedata.prop" y esperará a que se establezcan esos datos o propiedades antes evaluando la declaración 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');
              });
            }
          }
        };
      }
    };
  });