angularjs - operator - condicionales en línea en angular.js

ternary operator angular 4

Question

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:

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

pero en angular, parezco estar limitado a mostrar y esconder 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 de forma condicional el contenido en línea con solo {{}} en lugar de envolver el contenido en etiquetas html?

Answer 1

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 intento "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"}}

Answer 2

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

Answer 3

Funciona incluso en situaciones exóticas:

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

Answer 4

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

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

ng: si está disponible en toda la versión angular 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

Answer 5

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

 <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, voy con una función en mi alcance, 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.

Answer 6

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

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

Answer 7

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 filter . 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 fiddle 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'';
}

Answer 8

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

Answer 9

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

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

o verdadero falso en js angulares

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

Answer 10

Angular 1.1.5 agregó soporte para operadores ternarios:

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

Answer 11

Así que con Angular 1.5.1 (tenía la dependencia de la aplicación existente en otras dependencias de la pila 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}}