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

Question

我正在尝试使用ng-class的angular。我有一个函数，它根据我们发送的参数返回类。我该如何实现呢？

这是我尝试过的：

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

并在控制器中：

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表达式可以返回

1. 字符串： "class1 class2 class3"
2. 数组： ["class1", "class2", "class3"]
3. 一张地图： "{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;
    }
  }
}