angularjs - example - Cómo usar un valor dinámico con ngClass

ngclass angularjs

Question

Estoy tratando de aplicar un nombre de clase que sea igual a una variable de alcance.

Por ejemplo:

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

De modo que el valor de item.name se agrega a la clase. Esto no parece hacer nada sin embargo. ¿Alguna sugerencia sobre cómo hacer esto?

¡Gracias!

EDITAR:

Esto se está haciendo realmente dentro de una selección, usando ng-options. Por ejemplo:

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

Ahora, quiero aplicar un nombre de clase que tenga el valor de c.code

Encontré la siguiente directiva, que parece funcionar, pero no con la interpolación del valor:

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 1

Angularjs Aplicar clase con condición:

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

Answer 2

Creo que te perdiste el concepto.

Una clase css condicional se ve así:

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

Y no creo que quieras:

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

Probablemente quieras usar:

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

Answer 3

Estoy en angular 1.5.5 y ninguna de estas soluciones funcionó para mí.

Es posible usar la sintaxis de matriz y mapa a la vez, aunque solo se muestra en el último ejemplo aquí

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

Answer 4

Mejor tarde que nunca.

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

sí. '' y {{ para el nombre de clase.

Answer 5

Simplemente usando la variable debería ser suficiente:

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

Esto también está documentado en la documentación oficial .

Answer 6

Tratar...

<div ng-class="widget_width">

</div>

$scope.widget_width = col-lg-12;