angularjs si las declaraciones?

Question

Así que estoy corriendo a través de la tutoría para AngularJS:

Tengo un array definido en el controlador y me estoy volviendo diferentes puntos de la matriz, mediante una llamada cuando estoy en bucle a través de ng-repeat {{característica.nombre}} {{característica.descripción}}

Lo que no entiendo es que permite decir que tengo un tercer punto en la matriz denominada "importancia" y es un número de 1 a 10.No quiero mostrar que el número en el html, pero lo que yo quiero hacer es aplicar un color distinto a la función si que "importancia" número de la matriz es de 10 vs 1

entonces, ¿cómo puedo escribir una instrucción if para hacer esto:

es decir,

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

ni idea de si eso es correcto, pero eso es lo que quiero hacer

Answer 1

Esta primera es una directiva que evalúa si algo debe estar en el DOM solo una vez y agregue a los oyentes de reloj a la 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 es una directiva que condicionmente aplica atributos a los elementos solo una vez sin los oyentes de reloj:

i.e.

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

Por supuesto, su puede usar versiones dinámicas integradas en angular:

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

También puede usar el nuevo NG-si se agrega por Angularjs, que básicamente reemplaza a la interfaz de usuario, si el equipo de Angularui, estos agregarán condicionalmente las cosas de la DOM y agregarán a los oyentes de reloj para seguir evaluando:

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

Answer 2

Yo creo que no es if declaración disponibles.Por su estilo propósito, ng-class puede ser utilizado.

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

ng-switch es también conveniente.

-- update --

echa un vistazo a:https://stackoverflow.com/a/18021855/1238847

angular1.2.0 RC parece haber ng-si el soporte.

Answer 3

En realidad, hay un operador ternario en angular 1.2.0.

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

Answer 4

Creo que la respuesta necesita una actualización.

Anteriormente, podría usar la Directiva NGIF del proyecto Angularui (código aquí Si aún desea descargarlo), la mala noticia es que ya no se mantiene.

La buena noticia es que se ha agregado al Repo oficial de AngularJS ( rama inestable ) y pronto estará disponible en el Estable uno .

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

No solo ocultará el elemento DIV, sino que también lo elimine de DOM (cuando algo es falsamente).

Answer 5

ng-clase es probablemente la mejor respuesta a su problema, pero Angularui tiene una directiva "IF":

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

Buscar: Retire los elementos de la DOM completamente en lugar de simplemente ocultarlo.

Usé "UI-if" para decidir si debo hacer un valor de datos como una etiqueta o una entrada, en relación con el mes actual:

<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

En el caso de que su prioridad sea una etiqueta, podría crear un filtro de interruptor para usar dentro de la clase NG, como se muestra en una respuesta anterior, así que responde: https://stackoverflow.com/a/8309832/1036025 (para el código de filtro del interruptor)

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

Answer 7

También puede probar esta línea de código a continuación

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

que muestra foo.bar si is_foo es verdadero.

Answer 8

Qué funciona también:

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