example - ¿Cómo puedo usar el filtro AngularJS en ngClass?

ng-class if

Question

Estoy aprendiendo currularmente en AngularJS y jugando con el tutorial.

Estoy modificando el filtro de ejemplo del tutorial para devolver alguna cadena:

angular.module(''phonecatFilters'', []).filter(''checkmark'', function() {
  return function(input) {
    return input ? ''true-class'' : ''false-class'';
  };
});

Y me gustaría usar eso en ngClass como sigue:

{{phone.trueVal  | checkmark}} <i ng-class="{{phone.trueVal  | checkmark }}"></i>
{{phone.falseVal | checkmark}} <i ng-class="{{phone.falseVal | checkmark }}"></i>

Los resultados para:

true-class <i class="false-class">
false-class <i class="false-class">

Ahora ... mientras que para la vista simple, el filtro funciona como se espera ... ¿por qué no funciona para ngClass? ¿Cuál sería la forma correcta de usar un valor filtrado en ngClass (y otro como ngSrc etc.)?

Answer 1

En su caso, debe usar la class lugar de ng-class porque representa el nombre de la clase directamente en el html sin evaluación.

<div ng-controller="MyCtrl">
   <i class="{{phone.trueVal  | checkmark }}">{{phone.trueVal  | checkmark}}</i>
   <i class="{{phone.falseVal | checkmark }}">{{phone.falseVal | checkmark}}</i>
</div>

DEMO

Answer 2

Esto funcionó para mí. Simplemente miré con AngularJS, así que no estoy seguro de si la funcionalidad se agregó como parte de una actualización ya que esta pregunta tiene un par de años.

ng-class="{ ''has-error'': (login.form | validField:''username'') }"

Después de agregar los paréntesis, funcionó.