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);
}
});
});
});
}
};
}]);
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}]">
mieux plus tard que jamais.
<div ng-class="{'{{item.name}}' : item.condition}">
oui. '
et {{
pour classname.
Simplement à l'aide de la variable devrait être suffisant:
<div ng-class="item.name" />
ceci est également documenté dans le documents officiels.
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>
Angularjs appliquer la classe avec la condition:
<div ng-class="{true:'class1',false:'class2'}[condition]" >
Essayer...
<div ng-class="widget_width">
</div>
$scope.widget_width = col-lg-12;