EDIT: resposta 2Toad abaixo é o que você está procurando! Votem essa coisa

Se você estiver usando o Angular <= 1.1.4, essa resposta será:

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 “imedia if” (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. Eu percebo que você está perguntando sobre o {{}} especificamente, mas para os outros que vêm aqui, eu acho que vale a pena mostrar algumas das outras opções.

function em seu escopo $ (IMO, esta é a 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'; }; }); {{showSomething(foo)}} 

ng-show e ng-hide claro:

  FooBar 

ngSwitch

  
 Foo Bar What?  

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

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

Pessoalmente, na maioria dos casos eu iria com uma function no meu escopo, isso mantém a marcação bem limpa, e é rápido e fácil de implementar. A não ser que você faça a mesma coisa repetidas vezes, caso em que eu iria com a sugestão de Bertrand e criaria um filtro ou possivelmente uma diretiva, dependendo das circunstâncias.

Como sempre, a coisa mais importante é que sua solução é fácil de manter e pode ser testada. E isso dependerá completamente da sua situação específica.

Eu estou usando o seguinte para definir condicionalmente a class attr quando ng-class não pode ser usado (por exemplo, quando estilizando 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 em 1.1.4)

Eu publiquei um artigo sobre como trabalhar com o AngularJS + SVG que fala sobre isso e assuntos relacionados. 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:

 {{myVar || 'Text'}} 

Se eu te entendi bem, acho que você tem duas maneiras de fazer isso.

Primeiro você poderia tentar o ngSwitch e a segunda maneira possível seria criar o seu próprio filtro . Provavelmente ngSwitch é o caminho certo, mas se você quiser esconder ou mostrar conteúdo in-line, apenas usar {{}} filtro é o caminho a percorrer.

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

 
 
  

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

Biblioteca de interface do usuário angular tem diretiva interna ui-se para a condição no modelo / Views upto angular ui 1.1.4

Exemplo: Suporte na interface do usuário angular upto 1.1

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

se você tiver quaisquer dados na variável array, somente a div aparecerá

Então, com Angular 1.5.1 (tinha dependência de aplicativo existente em algumas outras dependencies de pilha MEAN é porque eu não estou usando atualmente 1.6.4)

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

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

Funciona mesmo em situações exóticas:

Se você quiser exibir “None” quando o valor for “0”, você pode usar como:

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

ou verdadeiro falso em js angular

  {{ $scope.amount === "0" ? "False" : "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 watch listen, MAS você pode adicionar um atributo adicional ao elemento que tem o set-if chamado wait-for = “somedata.prop” e aguardará que os dados ou a propriedade sejam definidos antes avaliando a declaração if uma vez. Esse atributo adicional pode ser muito útil se você estiver esperando por 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'); }); } } }; } }; });