angularjs if declaraciones?

Question

Así que estoy ejecutando el tutorial para AngularJS:

Tengo una matriz definida en el controlador y estoy devolviendo diferentes puntos en la matriz al llamar cuando estoy recorriendo ng-repeat {{feature. name}} {{feature.description}}

Lo que no entiendo es digamos que tengo un tercer punto en la matriz llamado "importancia" y es un número del 1 al 10. No quiero mostrar ese número en html, pero lo que sí quiero hacer es aplicar un color diferente a la función si ese número de "importancia" en la matriz es 10 vs 1

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

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 sólo una vez y no añade oyentes 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 condicionalmente aplica atributos a los elementos sólo se una vez sin oyentes reloj:

es decir

<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 utilizar el nuevo ng-si se añade por AngularJS que básicamente reemplaza la interfaz de usuario, si es creado por el equipo angularui éstos condicionalmente agregar y quitar cosas de la DOM y añadir detectores de reloj para mantener la evaluación:

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

Answer 2

No creo que haya comunicado if disponible. Para su propósito de estilo, se puede usar ng-class.

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

ng-switch es también conveniente.

- Actualización -

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

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

Answer 3

ng clase es probablemente la mejor respuesta a su problema, pero AngularUI tiene un "si" directiva:

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

búsqueda de: Eliminar elementos del DOM por completo en lugar de sólo ocultarlo.

utilicé "ui-if" para decidir si debería dar 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 4

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 5

En el caso en que su prioridad sería una etiqueta, puede crear un filtro de cambio a utilizar dentro de la clase ng como se muestra en la anterior SO responder: https://stackoverflow.com/a/8309832/1036025 (para el código del filtro Interruptor)

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

Answer 6

Creo que la respuesta necesita una actualización.

Anteriormente se podía usar la directiva ngIf del proyecto AngularUI (código here si aún desea descargarlo), las malas noticias son que ya no se mantiene.

La buena noticia es que se ha agregado al repositorio oficial de AngularJS (unstable branch) y pronto estará disponible en el stable one.

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

no sólo le permite ocultar el elemento DIV, pero eliminarlo de DOM también (cuando algo es Falsy).

Answer 7

En realidad hay un operador ternario en Angular 1.2.0.

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

Answer 8

Lo que también funciona es:

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