如何在 ngClass 中使用 AngularJS 过滤器? [英] How can I use AngularJS filter in ngClass?

问题描述

我目前正在学习 AngularJS 并在学习教程.

我正在修改教程示例过滤器以返回一些字符串:

angular.module('phonecatFilters', []).filter('checkmark', function() {返回函数(输入){返回输入 ?'真类':'假类'；};});

我想在 ngClass 中使用它，如下所示:

{{phone.trueVal |复选标记}} <i ng-class="{{phone.trueVal | 复选标记 }}"></i>{{phone.falseVal |复选标记}} <i ng-class="{{phone.falseVal | 复选标记 }}"></i>

结果:

true-class false-class 

现在......虽然对于简单的视图，过滤器按预期工作......为什么它不适用于 ngClass?在 ngClass(以及其他类似 ngSrc 等)中使用过滤值的正确方法是什么?

解决方案

在你的情况下，你应该使用 class 而不是 ng-class 因为你直接在 html 上渲染类名，无需求值.

<i class="{{phone.trueVal | 复选标记 }}">{{phone.trueVal |复选标记}}</i><i class="{{phone.falseVal | 复选标记 }}">{{phone.falseVal |复选标记}}</i>

演示

I'm curretly learning AngularJS and playing with the tutorial.

I'm modifying the tutorial example filter to return some string:

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

And I'd like to use that in ngClass as follows:

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

The results to:

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

Now.. while for simple view the filter works as expected.. why does it not work for ngClass? What whould be the correct way to use a filtered value in ngClass (and other like ngSrc etc).

解决方案

In your case, you should use class instead of ng-class because you render the class name directly on the html without evaluation.

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

DEMO

这篇关于如何在 ngClass 中使用 AngularJS 过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！