angularjs se declarações?

Question

Então, estou analisando o tutorial do AngularJS:

Eu tenho um array definido no controlador e estou retornando pontos diferentes no array chamando quando estou fazendo um loop por ng-repeat {{feature.name}} {{feature.description}}

O que não entendo é que digamos que tenho um terceiro ponto na matriz chamado "importância" e é um número de 1 a 10.Não quero exibir esse número no html, mas o que quero fazer é aplicar uma cor diferente ao recurso se esse número de "importância" na matriz for 10 vs 1

então, como escrevo uma instrução if para fazer isso:

ou seja

<p style="**insert if statement: {{if feature.importance == 10}} color:red; {{/if}} **">{{feature.description}}</p>

não faço ideia se está certo, mas é isso que eu quero fazer

Answer 1

Esta primeira é uma diretiva que avalia se algo deve estar no DOM apenas uma vez e não adiciona nenhum watch listener à página:

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

Esta segunda é uma diretiva que aplica condicionalmente atributos a elementos apenas uma vez, sem watch listeners:

ou seja

<div set-attr="{ data-id : post.id, data-name : { value : post.name, condition : post.name != 'FOO' } }"></div>

angular.module('setAttr',[]).directive('setAttr', function() {
  return {
    restrict: 'A',
    priority: 100,
    link: function(scope,elem,attrs) {
      if(attrs.setAttr.indexOf('{') != -1 && attrs.setAttr.indexOf('}') != -1) {
      //you could just angular.isObject(scope.$eval(attrs.setAttr)) for the above but I needed it this way
        var data = scope.$eval(attrs.setAttr);

        angular.forEach(data, function(v,k){

          if(angular.isObject(v)) {
            if(v.value && v.condition) {
                elem.attr(k,v.value);
                elem.removeAttr('set-attr');
            }
          } else {
            elem.attr(k,v);
            elem.removeAttr('set-attr');
          }
        });
      }
    }
  }
});

É claro que você pode usar versões dinâmicas incorporadas ao angular:

<div ng-class="{ 'myclass' : item.iscool }"></div>

Você também pode usar o novo ng-if adicionado pelo angularjs, que basicamente substitui o ui-if criado pela equipe angularui. Eles adicionarão e removerão condicionalmente coisas do DOM e adicionarão ouvintes de observação para continuar avaliando:

<div ng-if="item.iscool"></div>

Answer 2

Eu não acho que haja if declaração disponível.Para o seu propósito de estilo, ng-class pode ser usado.

<p ng-class="{important: feature.importance == 10 }">

ng-switch também é conveniente.

-- atualizar --

dê uma olhada em:https://stackoverflow.com/a/18021855/1238847

angular1.2.0RC parece ter suporte para ng-if.

Answer 3

Na verdade há um operador ternário em Angular 1.2.0.

<p style="{{feature.importance == 10 ? 'color:red' : ''}}">{{feature.description}}</p>

Answer 4

Acho que a resposta precisa de uma atualização.

Anteriormente você poderia usar a diretiva ngIf do projeto AngularUI (código aqui se você ainda quiser baixá-lo), a má notícia é que ele não é mais mantido.

A boa notícia é que ele foi adicionado ao repositório oficial do AngularJS (ramo instável) e em breve estará disponível no estável.

<div ng-if="something"> Foo bar </div>

Não apenas esconderá o DIV elemento, mas remova-o também do DOM (quando algo for falso).

Answer 5

ng-class é provavelmente a melhor resposta para o seu problema, mas AngularUI tem uma diretiva "if":

http://angular-ui.github.com/

procurar:Remova completamente os elementos do DOM em vez de apenas ocultá-los.

Usei "ui-if" para decidir se deveria renderizar um valor de dados como rótulo ou entrada, relativo ao mês atual:

<tbody id="allocationTableBody">
    <tr ng-repeat="a in data.allocations">
        <td>{{a.monthAbrv}}</td>
        <td ui-if="$index < currentMonth">{{a.amounts[0]}}</td>
    </tr>
</tbody>

Answer 6

No caso em que sua prioridade seria um rótulo, você poderia criar um filtro de switch para usar dentro da classe ng, conforme mostrado em uma resposta anterior do SO: https://stackoverflow.com/a/8309832/1036025 (para o código do filtro do switch)

<p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>

Answer 7

Você também pode tentar esta linha de código abaixo

<div class="{{is_foo && foo.bar}}">

que mostra foo.bar se is_foo for verdadeiro.

Answer 8

O que também funciona é:

<span>{{ varWithValue || 'If empty use this string' }}</span>