Как использовать динамическое значение с ngClass

Я пытаюсь применить имя класса так же, как и переменную области видимости.

Например:

<div ng-class="{item.name : item.name}">

Итак, значение item.name добавляется в класс. Это, кажется, ничего не делает. Любые предложения о том, как это сделать?

Спасибо!

EDIT:

Это выполняется в рамках select, используя ng-options. Например:

<select ng-options="c.code as c.name for c in countries"></select>

Теперь я хочу применить имя класса, имеющее значение c.code

Я нашел следующую директиву, которая, кажется, работает, но не с интерполяцией значения:

angular.module('directives.app').directive('optionsClass', ['$parse', function ($parse) {
  'use strict';

  return {
    require: 'select',
    link: function(scope, elem, attrs, ngSelect) {
      // get the source for the items array that populates the select.
      var optionsSourceStr = attrs.ngOptions.split(' ').pop(),
      // use $parse to get a function from the options-class attribute
      // that you can use to evaluate later.
          getOptionsClass = $parse(attrs.optionsClass);

      scope.$watch(optionsSourceStr, function(items) {
        // when the options source changes loop through its items.
        angular.forEach(items, function(item, index) {
          // evaluate against the item to get a mapping object for
          // for your classes.
          var classes = getOptionsClass(item),
          // also get the option you're going to need. This can be found
          // by looking for the option with the appropriate index in the
          // value attribute.
              option = elem.find('option[value=' + index + ']');

          // now loop through the key/value pairs in the mapping object
          // and apply the classes that evaluated to be truthy.
          angular.forEach(classes, function(add, className) {
            if(add) {
              angular.element(option).addClass(className);
            }
          });
        });
      });
    }
  };

}]);

Ответы

Ответ 1

Я нахожусь на angular 1.5.5, и ни одно из этих решений не работает для меня.

Можно использовать синтаксис массива и карты сразу, хотя он показан только в последнем примере здесь

<div ng-class="[item.name, {'other-name' : item.condition}]">

Ответ 2

Лучше позже, чем никогда.

<div ng-class="{'{{item.name}}' : item.condition}">

да. ' и {{ для имени класса.

Ответ 3

Простого использования переменной должно быть достаточно:

<div ng-class="item.name" />

Это также задокументировано в официальной документации.

Ответ 4

Я думаю, вы пропустили эту концепцию.

Условный класс css выглядит следующим образом:

<div ng-class="{'<css_class_name>': <bool_condition>}">

И я не думаю, что вы хотите:

<div ng-class="{'true': true}">

Вы, вероятно, хотите использовать:

<div ng-class="item.name"></div>

Ответ 5

Angularjs Применить класс с условием:

<div ng-class="{true:'class1',false:'class2'}[condition]" >

Ответ 6

<div [ngClass]="yourClassObject" [class.mb-3]="!conditionForSpecificCase">

В угловом 7.xi делаю так.

Ответ 7

Try...

<div ng-class="widget_width">

</div>

$scope.widget_width = col-lg-12;