javascript - 在 ng-class 中传递带参数的函数以获取类

Question

我正在尝试使用 ng-class 的 Angular 。我有一个函数，它根据我们发送的参数返回类。我怎样才能实现它？

这是我尝试过的:

<div ng-class="{ getClass(key) }" >

在 Controller 中:

getClass = function(keyVal){
    angular.forEach(myArray, function(value, id){
        if(value.key === keyVal){
            console.log(value.class);
            return value.class;
        }
    });
}

只需返回一个字符串即可。但是当我添加这个 anfular.forEach 时，它就停止了。在调试器中，循环工作正常并返回正确的数据。

我知道它可以通过过滤器来实现，但我只想这样做。

Answer 1

您不应该使用单个花括号，只需删除它们即可:

<div ng-class="getClass(key)">

但是，对于您的用例，将表达式直接写入 HTML 甚至更简单(而不是调用函数)

<div ng-class="key + '-class'">

请记住，ng-class 表达式可以返回

一个字符串:"class1 class2 class3"

一个数组:["class1", "class2", "class3"]

map :"{class1: true, class2: true, class3: true}"

更新

你的新问题是不同的。当您返回 angular.forEach 内的内容时，它只是退出循环，但函数 getClass 不返回它。所以保留对它的引用:

getClass = function(keyVal) {
    var theClass;
    angular.forEach(myArray, function(value, id) {
        if(value.key === keyVal) {
            theClass = value.class;
        }
    });
    return theClass;
}

或者你可以有一个更简单的版本:

getClass = function(keyVal) {
  for (var i = 0; i < myArray.length; i++) {
    if (myArray[i].key === keyVal) {
      return myArray[i].class;
    }
  }
}