condicionais inline em angular.js

Eu queria saber se existe uma maneira angular de exibir condicionalmente conteúdo que não seja o ng-show etc. Por exemplo, no backbone.js, eu poderia fazer algo com conteúdo embutido em um modelo como:

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

mas em angular, pareço estar limitado a mostrar e ocultar coisas envoltas em tags html

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

Qual é a maneira recomendada em angular de mostrar e ocultar condicionalmente o conteúdo embutido em angular usando {{}} em vez de agrupar o conteúdo em tags html?

EDIT: A resposta de 2Toad abaixo é o que você está procurando! Voto positivo nessa coisa

Se você estiver usando Angular <= 1.1.4, então esta resposta fará:

Mais uma resposta para isso. Estou postando uma resposta separada, porque é mais uma tentativa "exata" de uma solução do que uma lista de possíveis soluções:

Aqui está um filtro que fará um "imediato se" (aka iif):

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

e pode ser usado assim:

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

O Angular 1.1.5 adicionou suporte para operadores ternários:

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

Milhares de maneiras de esfolar esse gato. Sei que você está perguntando entre {{}} especificamente, mas para outros que vêm aqui, acho que vale a pena mostrar algumas das outras opções.

função no seu escopo $ (IMO, esta é sua melhor aposta na maioria dos cenários):

  app.controller('MyCtrl', function($scope) {
      $scope.foo = 1;

      $scope.showSomething = function(input) {
           return input == 1 ? 'Foo' : 'Bar';
      };
   });

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

ng-show e ng-hide, é claro:

 <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>

Um filtro personalizado, como sugeriu Bertrand. (esta é sua melhor escolha se você tiver que fazer a mesma coisa repetidamente)

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

{{foo | myFilter}}

Ou uma diretiva 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>

Pessoalmente, na maioria dos casos, eu usaria uma função no meu escopo, ela mantém a marcação bastante limpa e é rápida e fácil de implementar. A menos que você faça a mesma coisa repetidas vezes, nesse caso, eu iria com a sugestão de Bertrand e criaria um filtro ou possivelmente uma diretiva, dependendo das circunstâncias.

Como sempre, o mais importante é que sua solução seja fácil de manter e esperamos que seja testável. E isso vai depender completamente da sua situação específica.

Estou usando o seguinte para definir condicionalmente a classe attr quando a classe ng não puder ser usada (por exemplo, ao estilizar SVG):

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

A mesma abordagem deve funcionar para outros tipos de atributos.

(Eu acho que você precisa estar no mais recente angular instável para usar ng-attr-, atualmente estou no 1.1.4)

Publiquei um artigo sobre como trabalhar com o AngularJS + SVG que fala sobre isso e questões relacionadas. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

Para verificar um conteúdo variável e ter um texto padrão, você pode usar:

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

Se eu te entendi bem, acho que você tem duas maneiras de fazê-lo.

Primeiro você pode tentar o ngSwitch e a segunda maneira possível seria criar seu próprio filtro . Provavelmente o ngSwitch é a abordagem certa, mas se você deseja ocultar ou mostrar conteúdo embutido, basta usar o filtro {{}}.

Aqui está um violino com um filtro simples como exemplo.

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

A biblioteca de interface do usuário angular possui a diretiva interna ui-if para a condição no modelo / Visualizações até a interface angular 1.1.4

Exemplo: Suporte na interface do usuário angular até a interface do usuário 1.1.4

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

ng-se disponível em toda a versão angular após 1.1.4

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

se você tiver algum dado na variável array, somente a div aparecerá

Portanto, com o Angular 1.5.1 (tinha dependência de aplicativo existente em algumas outras dependências da pilha MEAN, é por isso que não estou usando o 1.6.4)

Isso funciona para mim como o OP dizendo {{myVar === "two" ? "it's true" : "it's false"}}

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

se você quiser exibir "Nenhum" quando o valor for "0", poderá usar como:

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

ou verdadeiro falso em js angulares

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

Funciona mesmo em situações exóticas:

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

Vou jogar o meu na mistura:

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

isso avalia a instrução if uma vez e não adiciona nenhum ouvinte de observação, mas você pode adicionar um atributo adicional ao elemento que possui o conjunto se chamado wait-for = "somedata.prop" e aguardará a definição desses dados ou propriedades antes avaliando a instrução if uma vez. esse atributo adicional pode ser muito útil se você estiver aguardando dados de uma solicitação 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');
              });
            }
          }
        };
      }
    };
  });