Передача функции с параметрами в ng-классе для получения класса

Я пытаюсь использовать ng-класс 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;
        }
    });
}

Просто возвращается строка. но в тот момент, когда я добавляю этот анфуляр. Для каждого он останавливается. В отладчике цикл работает нормально и возвращает правильные данные.

Я знаю, что это может быть затронуто фильтром, но я хочу сделать это только.

Ответ 1

Вы не используете одиночные фигурные скобки, просто удалите их, и он будет работать:

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

Однако для вашего варианта использования еще проще записать выражение непосредственно в HTML (вместо вызова функции)

<div ng-class="key + '-class'">

Имейте в виду, что выражение ng-класса может возвращать

строка: "class1 class2 class3"
массив: ["class1", "class2", "class3"]
карта: "{class1: true, class2: true, class3: true}"

Update

Ваша новая проблема другая. Когда вы возвращаете что-то внутри 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;
    }
  }
}

Ответ 2

Обновление

Вы можете достичь этого следующим образом

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


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

и в шаблоне

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

См. Мою полную рабочую обновленную скрипту

Ответ 3

Вы возвращаете значение из функции обратного вызова для каждого метода. Это неверно. Потому что u r ожидаемое возвращаемое значение из метода getclass Попробуйте это

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

    return c;
   };