如何在 Angular 1.4 及更高版本中通过 ng-options 在 select 中使用 ng-class

Question

我的问题类似于以下帖子之一：How to use ng-class in select with ng-options

我希望能够使用 CSS 在我的 select 中自定义特定选项。如果我恢复使用的示例，我会有这样一群人：

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

现在我希望能够编写如下代码，以不同的方式显示一个符合条件的人与另一个不符合条件的人：

<select ng-model="Blah" ng-options="person.Name for person in persons" ng-class="{'is-elligible': person.Elligible}"></select>

但在这段代码中，我无法访问ng-class 标记中的person 变量。

问题在另一篇文章中，该解决方案基于一个 cutom 指令，该指令在 1.4 之前的 angular 中运行良好。现在这个解决方案不再起作用了。

一个可能的解决方案也不是使用ng-options，而是在option 标记中使用ng-repeat。但我仍想使用ng-options，因为它看起来更快更容易使用。

因此，如果有人有任何解决方案可以使用 angular 1.4 及更高版本执行此操作，那么分享它会很棒！ :)

提前致谢

Answer 1

你不能用普通的ng-options 做到这一点。

您应该使用ng-repeat 或custom 指令来实现所需的行为。如果情况像您描述的那样简单，我建议您使用ng-repeat，因为这是实现该行为的常用方法。

考虑深入了解已有答案的细节： Customize ng-options selection look 它会回答你的问题。

p.s. 没有抓住您使用 ng-repeat 的意义，因为在特定情况下，使用已经存在的指令比创建新指令并向其添加单元测试更容易，您可以在其中 '已经知道ng-repeat 更慢...