Блог

Я перебираю список элементов и делаю ввод флажка. Я хочу иметь класс, когда он отмечен, и другой (или отсутствие), если он не отмечен.

В настоящее время в $scope есть массив, который отслеживает, отмечен элемент или нет, поэтому я пытался поместить это условие в ng-scope , но синтаксис, похоже, является проблемой:

В этом примере класс css .test присутствовал бы, если существует uniqJoke, что, конечно, всегда происходит, потому что мы перебираем их:

   <div class="col-md-6" ng-repeat="uniqJoke in uniqJokeTypes">
    Each Joke Type
    <div class="type-filter-button type-filter-button-{{uniqJoke}}" ng-class="{test: uniqJoke}" ng-click="jokeTypeClick(uniqJoke)">
      <label ng-bind="uniqJoke"></label>
      <!-- <input type="checkbox" ng-model="JokeTypeFilter[uniqJoke]" hidden/> -->
      <input type="checkbox" ng-model="uniqJoke" hidden/>
    </div>
  </div>
  

Допустим, есть несколько типов { funny , pirate , knock-knock , …}. Но как бы я добавил класс css динамически на основе того, существует ли шутка в переменной ассоциативного массива JokeTypeFilter{ funny:true, pirate:true, knock-knock:false }

Следующее не работает (синтаксическая ошибка):

ng-class=»{ {{uniqJoke}}: JokeTypeFilter[uniqJoke] }»

и это не сработает, потому что это будет вставлять класс uniqJoke , если условие соответствует:

ng-class=»{ uniqJoke: JokeTypeFilter[uniqJoke] }»

но я бы хотел, чтобы у div было .pirate if JokeTypeFilter[pirate] == true .

Одним из вариантов является использование выражения в самом class атрибуте. Что-то вроде этого:

  class="type-filter-button type-filter-button-{{uniqJoke}} {{JokeTypeFilter[uniqJoke]?uniqJoke:''}}"
  

ng-class атрибут может принимать вызов функции контроллера, поэтому вы можете просто выполнить следующее в атрибуте HTML:

 ng-class="jokeCssClasses()"
  

Затем в вашем контроллере определите вызов функции, который возвращает карту имен шуток и значений:

 $scope.jokeCssClasses = function() {
    return { funny:true, pirate:true, knock-knock:false };
};
  

С помощью функции вы можете создать карту из списка типов шуток, используя angular.forEach , или любой механизм итерации по своему вкусу.

ОБНОВЛЕНИЕ: Вот, чтобы показать, что я имел в виду под «построением карты» из angular.forEach . Предположим, $scope.uniqJokeTypes что это массив, вы можете сделать следующее:

 $scope.jokeCssClasses = function() {
    var map = {};
    angular.forEach($scope.uniqJokeTypes, function(joke) {
        map[joke] = true;
    });
    return map;
}
  

Вы можете прочитать больше о том, как выполнить итерацию здесь:https://docs.angularjs.org/api/ng/function/angular.forEach