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

【问题标题】：Passing function with parameters in ng-class to get the class在 ng-class 中传递带参数的函数以获取类
【发布时间】：2016-03-28 15:20:44
【问题描述】：

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

这是我尝试过的：

<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 时，它就停止了。在调试器中，循环工作正常并返回正确的数据。

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

【问题讨论】：

使用双花括号并检查
你也可以添加你的数组吗？

标签： javascript angularjs

【解决方案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;
    }
  }
}

【讨论】：

嘿！我试过这个。但它不起作用。在调试器中，该函数返回类，但它没有反映在 HTML 中。
你的问题已经改变，我已经更新了我的答案，它现在应该可以工作了。 PS：你确定在调试器中 getClass 返回类，还是你只看到你的 console.log inside forEach？

【解决方案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

【讨论】：

如果我想在模板渲染时调用它怎么办？
我试过这个。就我而言，当简单地返回一些东西时，它就可以工作。但我也在使用angular.forEach。在我添加之后，它停止工作。在调试器中，它发送正确的值。但它没有反映在 HTML 上。
@charger73 不从 forEach 回调返回..设置一些变量..从 getClass 方法返回值

【解决方案3】：

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

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

    return c;
   };

【讨论】：