Comment utiliser une valeur dynamique avec ngClass

j'essaye d'appliquer un nom de classe qui est le même comme une étendue variable.

Par exemple:

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

de Sorte que la valeur de item.name est ajouté à la classe. Cela ne semble pas faire quelque chose de bien. Toutes les suggestions sur la façon de faire cela?

Merci!

EDIT:

ceci est en train d'être fait dans un select, en utilisant ng-options. Par exemple:

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

Maintenant, je veux appliquer une classe nom de la valeur de c.code

j'ai trouvé la directive suivante, qui semble fonctionner, mais pas avec l'interpolation de la valeur:

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

}]);
22
demandé sur isherwood 2014-07-04 00:43:05

6 réponses

je suis sur angulaire 1.5.5 et aucune de ces solutions n'a fonctionné pour moi.

il est possible d'utiliser la syntaxe du tableau et de la carte à la fois bien qu'elle ne soit affichée que dans le dernier exemple ici

<div ng-class="[item.name, {'other-name' : item.condition}]">
26
répondu phazei 2016-12-15 01:20:32

mieux plus tard que jamais.

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

oui. ' et {{ pour classname.

63
répondu knes 2015-06-02 10:16:23

Simplement à l'aide de la variable devrait être suffisant:

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

ceci est également documenté dans le documents officiels.

8
répondu dirkk 2014-07-03 20:44:39

je pense que vous avez manqué le concept.

Une condition de la classe css ressemble à ceci:

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

Et je ne pense pas que vous voulez:

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

Vous probally souhaitez utiliser:

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

6
répondu Amir Popovich 2014-07-03 20:45:18

Angularjs appliquer la classe avec la condition:

<div ng-class="{true:'class1',false:'class2'}[condition]" >
1
répondu Rajeev 2016-01-14 11:58:47

Essayer...

<div ng-class="widget_width">

</div>

$scope.widget_width = col-lg-12;
-6
répondu Ankur Kumar 2016-11-03 05:40:57