Question

我正在尝试应用与范围变量相同的类名。

例如：

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

这样就可以将item.name的值添加到类中。但这似乎没有做任何事情。有关如何做到这一点的任何建议吗？

谢谢！

编辑：

这实际上是在一个选择中使用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);
            }
          });
        });
      });
    }
  };

}]);

Answer 1

比以前更好。

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

是肯定的。对于classname，我需要'和{{。

Answer 2

我的角度为1.5.5，这些解决方案都不适合我。

虽然它只显示在the last example here

中，但可以同时使用数组和地图语法

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

Answer 3

只需使用变量即可：

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

这也记录在official documentation。

中

Answer 4

我认为你错过了这个概念。

条件css类如下所示：

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

我认为你不想要：

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

您最初想要使用：

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

Answer 5

Angularjs使用条件应用类：

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

Answer 6

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

在7.x中，我就是这样。

Answer 7

这在某些情况下很有用：

HTML：

<div ng-class="getCssClass()"></div>

JS：

$scope.getCssClass = function () {
    return { item.name: item.name };
};

Answer 8

...试

<div ng-class="widget_width">

</div>

$scope.widget_width = col-lg-12;

如何使用ngClass的动态值

8 个答案: