How to use a dynamic value with ngClass

I’m trying to apply a class name that’s the same as a scope variable.

For example:

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

So that the value of item.name is added to the class. This doesn’t seem to do anything though. Any suggestions on how to do this?

Thanks!

EDIT:

This is actually being done within a select, using ng-options. For example:

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

Now, I want to apply a class name that has the value of c.code

I found the following directive, which seems to work, but not with interpolation of the value:

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);
            }
          });
        });
      });
    }
  };

}]);

Answer

I’m on angular 1.5.5 and none of these solutions worked for me.

It is possible to use the array and map syntax at once though it’s only shown in the last example here

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