Как использовать фильтр AngularJS в ngClass?

Я изучаю AngularJS и играю с учебником.

Я изменяю фильтр примера учебника, чтобы вернуть некоторую строку:

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

И я хотел бы использовать это в ngClass следующим образом:

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

Результаты:

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

Теперь.. пока для простого просмотра фильтр работает так, как ожидалось.. почему он не работает для ngClass? Каким будет правильный способ использования отфильтрованного значения в ngClass (и других подобных ngSrc и т.д.).

Ответ 1

В вашем случае вы должны использовать class вместо ng-class, потому что вы визуализируете имя класса непосредственно на html без оценки.

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

DEMO

Ответ 2

Это сработало для меня. Просто смотрел на AngularJS, поэтому я не уверен, что функциональность была добавлена как часть обновления, так как этот вопрос пару лет.

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

После добавления скобок он работал.