Select 如何在使用ng选项选择中使用ng类

我有一个Person对象数组

var persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
];

我使用select和ng选项，如下所示：

<select ng-model="Blah" ng-options="person.Name for person in persons"></select>

<option class="is-eligible" label="foo" value="object:1">foo</option>

select.blueSelect option[value="false"]{
    color:#01aac7;
}

<select class="form-control blueSelect" name="persons" id="persons1"
        ng-options="person as person.name for person in $ctrl.persons track by person.Eligible"
        ng-model="$ctrl.selectedPerson" required>
    <option disabled selected value="">Default value</option>
</select>

我想用红色显示带有合格：false的记录。

---

因此，问题是如何使用

select

中的

ng类来实现这一点？由于我们没有使用任何
选项
标记，如果我只是在
选择
元素本身中添加
ng类
，它将不起作用。
在这种情况下，您只能在使用带有选项标记的
ng repeat
时应用ng类：

<select ng-model="Blah">
  <option ng-repeat="person in persons" ng-class="{red: person.Eligible}">
    {{person.Name}}
  </option>  
</select>


{{person.Name}

这将为您的“合格”人员提供自定义类，但CSS不会在Bowser中一致工作

.
您可以创建一个指令，该指令在处理ngOptions指令后处理选项，该指令使用适当的类更新选项

更新：旧代码有一些bug，在回答这个问题后我学到了一些东西

以下是更新代码（2013年11月30日3:17）：

app.directive（'optionClass'，函数（$parse）{
返回{
require:'选择'，
链接：功能（范围、元素、属性、ngSelect）{
//获取填充select的items数组的源。
var optionsourcestr=attrs.ngOptions.split（“”）.pop（），
//使用$parse从选项类属性获取函数
//以后可以使用它进行评估。
getoptionClass=$parse（attrs.optionClass）；
范围.$watch（选项sourcestr，函数（项）{
//当选项源更改时，通过其项循环。
angular.forEach（项目、功能（项目、索引）{
//对项求值以获取其映射对象
//为了你的课。
var类别=GetOptionClass（项目），
//还可以获得您需要的选项。可以找到
//通过在
//值属性。
option=elem.find（'option[value='+index+']）；
//现在循环映射对象中的键/值对
//并应用计算为truthy的类。
forEach（类、函数（add、类名）{
如果（添加）{
元素（选项）.addClass（类名）；
}
});
});
});
}
};
});

以下是如何在标记中使用它：



它的工作原理与ng类类似，只是它基于集合中的每个项目。
该指令是单向的，但我使用了自定义过滤器。
如果你知道如何选择你的元素，你应该在这里很好。挑战是在select中找到当前选项元素。我本可以使用“包含”选择器，但选项中的文本对于项目可能不是唯一的。为了按值查找选项，我注入了范围和项本身

<select ng-model="foo" ng-options="item.name|addClass:{eligible:item.eligible,className:'eligible',scope:this,item:item} for item in items"></select>

在这里您可以。
接受的答案对我不起作用，因此我使用
track by
找到了一个没有自定义指令的替代方案：

<select ng-model="foo" ng-options="x.name for x in items track by x.eligible"></select>

我想对被接受的答案发表评论，但因为我没有足够的声望点数，我必须添加一个答案。
我知道这是一个老生常谈的问题，但最近的评论添加到了公认的答案中

对于angularjs 1.4.x，必须对建议的指令进行调整，以使其重新工作。
由于ngOptions的突破性变化，该选项的值不再是索引，因此该行

option = elem.find('option[value=' + index + ']');

再也不行了

如果您将plunker中的代码更改为

<select ng-model="foo" ng-options="x.id as x.name for x in items" 
        options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }">
</select>

让它重新工作

当然，这不是一个通用的解决方案，因为如果对象中没有id怎么办？
然后，您将在选项标记中找到
value=“object:y”
，其中y是angularjs生成的数字，但使用此
y
您无法映射到您的项目

希望这能帮助一些人在angularjs更新到1.4.x之后，让他们的代码再次工作

我还尝试使用
ng选项中的
曲目，但没有成功。
可能是那些在angularjs方面比我有更多经验的人（=我在angularjs的第一个项目）？
由于声誉问题，我不能将此作为评论来写，但我已经更新了plunker，以获得Angular 1.4.8的公认答案。感谢Ben Lesh的原始答案，这对我帮助很大。不同之处在于，较新的Angular生成如下选项：

<select ng-model="Blah" ng-options="person.Name for person in persons"></select>

<option class="is-eligible" label="foo" value="object:1">foo</option>

select.blueSelect option[value="false"]{
    color:#01aac7;
}

<select class="form-control blueSelect" name="persons" id="persons1"
        ng-options="person as person.name for person in $ctrl.persons track by person.Eligible"
        ng-model="$ctrl.selectedPerson" required>
    <option disabled selected value="">Default value</option>
</select>

找不到这个选项。My change解析ngOptions并确定标签使用了项的哪个字段，并基于该字段而不是值查找选项。见：

如果您不仅想以红色显示它们，而且还想阻止用户选择选项，则可以在以下情况下使用
禁用：

<select 
    ng-model="Blah"
    ng-options="person.Name disable when !person.Eligible for person in persons">
</select>



然后，您可以使用CSS设置禁用选项的颜色。
我知道我参加聚会有点晚，但对于希望使用纯CSS解决此问题的人，无需使用指令，您可以创建如下CSS类：

<select ng-model="Blah" ng-options="person.Name for person in persons"></select>

<option class="is-eligible" label="foo" value="object:1">foo</option>

select.blueSelect option[value="false"]{
    color:#01aac7;
}

<select class="form-control blueSelect" name="persons" id="persons1"
        ng-options="person as person.name for person in $ctrl.persons track by person.Eligible"
        ng-model="$ctrl.selectedPerson" required>
    <option disabled selected value="">Default value</option>
</select>

这个css规则说：在每个“select”中找到value=false且标记名为“option”的所有元素，这些元素有一个类“blueSelect”，并使文本颜色为#01aac7；（蓝色的阴影）

在您的情况下，您的HTML将如下所示：

<select ng-model="Blah" ng-options="person.Name for person in persons"></select>

<option class="is-eligible" label="foo" value="object:1">foo</option>

select.blueSelect option[value="false"]{
    color:#01aac7;
}

<select class="form-control blueSelect" name="persons" id="persons1"
        ng-options="person as person.name for person in $ctrl.persons track by person.Eligible"
        ng-model="$ctrl.selectedPerson" required>
    <option disabled selected value="">Default value</option>
</select>

注意value旁边的*是一个正则表达式，它意味着在option元素的value字段的某处找到单词“False”

快速编辑
您还可以使用ng选项表达式中的“禁用时间”，选择禁用合格=False的选项，例如：

标签禁用时禁用在数组中的值

我将把如何在您的案例中使用它留给您去了解；-）

这适用于简单的css修改，对于更复杂的内容，您可能需要一个指令或其他方法。Tes