Динамический класс с условными выражениями с использованием ng-класса

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

В настоящее время в $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, если JokeTypeFilter[pirate] == true.


angularjs ng-class
person chris Frisina    schedule 30.06.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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

arrow_upward
2
arrow_downward

Атрибут 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

person b0nyb0y    schedule 30.06.2014
comment
вы возвращаете литералы. Элементы динамические, поэтому я не знаю названий. как сделать это динамически, так как $scope.jokeCssClasses = function(uniqType) {return { uniqType:true };} должен возвращать строковый литерал uniqType как класс - person chris Frisina; 30.06.2014
comment
@chrisFrisina Именно поэтому я указал на angular.forEach. Вы можете использовать его для динамического построения карты. Я только что добавил вам конкретный пример. Если вы отлаживаете свой браузер, вы увидите, что на каждой итерации переменная joke будет каждым типом шутки в списке. - person b0nyb0y; 30.06.2014