Javascript 在 ng-class 中传递带参数的函数以获取类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28208165/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Passing function with parameters in ng-class to get the class
提问by Ateev Chopra
I am trying to use ng-class of angular. I have a function which returns the class based on the parameters we send it. How can i achieve it ?
我正在尝试使用 ng-class 的角度。我有一个函数，它根据我们发送的参数返回类。我怎样才能实现它？
Here's what i tried:
这是我尝试过的：
<div ng-class="{ getClass(key) }" >
and in the controller:
并在控制器中：
getClass = function(keyVal){
angular.forEach(myArray, function(value, id){
if(value.key === keyVal){
console.log(value.class);
return value.class;
}
});
}
Just returning a string works. but the moment I add this anfular.forEach, it stops. In debugger, the loop is working fine and returning the right data.
只需返回一个字符串即可。但是当我添加这个 anfular.forEach 时，它停止了。在调试器中，循环工作正常并返回正确的数据。
I know it can be acheved by a filter, but I want to do this way only.
我知道它可以通过过滤器实现，但我只想这样做。
回答by floribon
You shoud not use single curly-brackets, simply remove them and it will work:
您不应使用单个大括号，只需将其删除即可：
<div ng-class="getClass(key)">
However for your use case it is even simpler to write the expression directly into the HTML (instead of calling a function)
但是，对于您的用例，将表达式直接写入 HTML（而不是调用函数）甚至更简单
<div ng-class="key + '-class'">
Keep in mind that the ng-class expression can return
请记住，ng-class 表达式可以返回
- a string:
"class1 class2 class3" - an array:
["class1", "class2", "class3"] - a map:
"{class1: true, class2: true, class3: true}"
- 一个字符串：
"class1 class2 class3" - 数组：
["class1", "class2", "class3"] - 一张地图：
"{class1: true, class2: true, class3: true}"
Update
更新
Your new problem is different. When you return something inside angular.forEach, it just exit the loop but it is not returned by the function getClass. So keep a reference to it:
你的新问题是不同的。当你在里面返回一些东西时angular.forEach，它只是退出循环，但它不是由函数 getClass 返回的。因此，请保留对它的引用：
getClass = function(keyVal) {
var theClass;
angular.forEach(myArray, function(value, id) {
if(value.key === keyVal) {
theClass = value.class;
}
});
return theClass;
}
Or you can have a simpler version:
或者你可以有一个更简单的版本：
getClass = function(keyVal) {
for (var i = 0; i < myArray.length; i++) {
if (myArray[i].key === keyVal) {
return myArray[i].class;
}
}
}
回答by Nisham Mahsin
Update
更新
You can achieve this by like this
你可以这样实现
myapp.controller('myCtrl', function ($scope) {
$scope.getClass = function(a){
return a;
}
});
and in template
并在模板中
<div ng-class="getClass('red')">text</div>
回答by Amit Gaikwad
You are returning value from callback function of for each method..which not correct..because u r expected return value from getclass method Try this
您正在从每个方法的回调函数返回值..这不正确..因为您期望从 getclass 方法返回值试试这个
$scope.getclass =function(k){
Var c="";
angular.foreach(arr,function(v){
//to do
c=k;
});
return c;
};
