使用ng-class中的参数传递函数来获取类

Question

我正在尝试使用ng-class of 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;
    }
  }
}