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

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

Answer 2

<强>更新

您可以通过这样的方式实现这一目标

myapp.controller('myCtrl', function ($scope) {


      $scope.getClass = function(a){
            return a;
      } 
});

并在模板中

    <div ng-class="getClass('red')">text</div>

See My full working updated fiddle

Answer 3

你从每个方法的回调函数返回值...这是不正确的...因为你期望从getclass方法返回值试试这个

  $scope.getclass =function(k){
  Var c="";
   angular.foreach(arr,function(v){
   //to do
      c=k;
   });

    return c;
   };

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

3 个答案:

更新