Angularjs纳克级的动态值 [英] Angularjs ng-class dynamic value

问题描述

我想申请一个类名这是同一个范围的变量。

例如：

＆LT; D​​IV纳克级={item.name：item.name}＆GT;

让的值item.name 添加到类。这似乎并不尽管做任何事情。如何做到这一点有什么建议？

谢谢！

编辑：

这实际上是被内选择完成，采用NG选项。例如：

＆LT;选择NG选项=C code作为c.name在国家C＆GT;＆LT; /选择＆GT;

现在，我想申请一个具有价值的类名角code

我发现下面的指令，这似乎是工作，但不能与价值的插补：

  angular.module（'directives.app'）。指令（optionsClass'，['$解析'，函数（$解析）{
  使用严格的;  返回{
    要求：'选择'，
    链接：功能（范围，ELEM，ATTRS，ngSelect）{
      //获取项目阵列用于填充选择源。
      变种optionsSourceStr = attrs.ngOptions.split（''）.pop（），
      //使用$解析从选项-class属性得到一个功能
      //你可以使用后评估。
          getOptionsClass = $解析（attrs.optionsClass）;      范围。$腕表（optionsSourceStr，功能（项目）{
        //当选择源通过改变其项目环。
        angular.forEach（项功能（项指数）{
          //评估对项目得到了一个映射对象
          //你的班。
          VAR类= getOptionsClass（项目）
          //还可以得到你要需要的选项。此，可以发现
          //通过寻找与在合适的索引选项
          // value属性。
              选项​​= elem.find（'选项[值='+指数+']'）;          //现在通过在映射对象中的键/值对环
          //并应用评价为truthy类。
          angular.forEach（类，函数（添加，的className）{
            如果（添加）{
              angular.element（可选）.addClass（类名）;
            }
          }）;
        }）;
      }）;
    }
  };}]）;
 

解决方案

晚来总比不来。

 ＆LT; D​​IV纳克级={'{{item.name}}'：item.condition}＆GT;
 

是的。 和 {{的类名。

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

}]);

解决方案

Better later than never.

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

yes. ' and {{ for classname.

这篇关于Angularjs纳克级的动态值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！