如何在 ngClass 中使用动态值 [英] How to use a dynamic value with ngClass
问题描述
我正在尝试应用与作用域变量相同的类名.
例如:
以便将item.name 的值添加到类中.但这似乎没有任何作用.有关如何执行此操作的任何建议?
谢谢！
这实际上是在选择中完成的，使用 ng-options.例如:
现在，我想应用一个具有 c.code
我发现以下指令似乎有效，但不能插入值:
angular.module('directives.app').directive('optionsClass', ['$parse', function ($parse) {'使用严格';返回 {要求:'选择'，链接:功能(范围，元素，属性，ngSelect){//获取填充 select 的 items 数组的源.var optionsSourceStr = attrs.ngOptions.split(' ').pop(),//使用 $parse 从 options-class 属性中获取一个函数//您可以稍后使用它进行评估.getOptionsClass = $parse(attrs.optionsClass);scope.$watch(optionsSourceStr, function(items) {//when the options source changes loop through its items.angular.forEach(items, function(item, index) {//对项目进行评估以获得映射对象//为您的课程.var classes = getOptionsClass(item),//也得到你需要的选项.这个可以找到//通过寻找具有适当索引的选项//值属性.option = elem.find('option[value=' + index + ']');//现在遍历映射对象中的键/值对//并应用评估为真的类.angular.forEach(classes, function(add, className) {如果(添加){angular.element(option).addClass(className);}});});});}};}]);我使用的是 angular 1.5.5，但这些解决方案都不适合我.
可以同时使用数组和映射语法，尽管它只显示在 最后一个例子
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);
}
});
});
});
}
};
}]);
解决方案 I'm on angular 1.5.5 and none of these solutions worked for me.
It is possible to use the array and map syntax at once though it's only shown in the last example here
<div ng-class="[item.name, {'other-name' : item.condition}]">
这篇关于如何在 ngClass 中使用动态值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
