如何在带有 ng-options 的选择中使用 ng-class [英] How to use ng-class in select with ng-options
问题描述
我有一组 Person 对象
I have an array of Person objects
var persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
];
我正在使用带有 ng-options 的 select,如下所示:
and i am using select with ng-options like this:
<select ng-model="Blah" ng-options="person.Name for person in persons"></select>
我想以红色颜色显示Eligible:false的记录.所以问题是我如何在 select
中使用 ng-class
来实现这一点?由于我们没有使用任何 option
标签,如果我只是在 select
元素本身中添加 ng-class
将无法工作.
I want to show the record with Eligible:false in red color.
So the problem is how do i use the ng-class
in select
inorder to achieve this? Since we are not using any option
tag it wont work if i simply add ng-class
in the select
element itself.
推荐答案
您可以创建一个指令,在处理 ngOptions 指令并使用适当的类更新它们之后处理选项.
You could create a directive that processed the options after the ngOptions directive is processed that updated them with the appropriate classes.
更新:旧代码有一些错误,自从我回答这个问题后,我学到了一些东西.这是在 1.2.2 中重做的 Plunk(但也应在 1.0.X 中工作)
Update: The old code had a few bugs, and I've learned a bit since I answered this question. Here is a Plunk that was redone in 1.2.2 (but should work in 1.0.X as well)
这是更新(2013 年 11 月 30 日 3:17) 代码:
app.directive('optionsClass', function ($parse) {
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);
}
});
});
});
}
};
});
以下是您在标记中使用它的方式:
Here's how you'd use it in your markup:
<select ng-model="foo" ng-options="x.name for x in items"
options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }">
</select>
它的工作方式与 ng-class 类似,不同之处在于它是基于集合中的每个项目.
It works like ng-class does, with the exception that it's on a per-item-in-the-collection basis.
这篇关于如何在带有 ng-options 的选择中使用 ng-class的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!