javascript - 如何在 Angular 1.4 及更高版本的 ng-options 中使用 ng-class

标签 javascript angularjs angularjs-directive ng-options ng-class

我的问题类似于以下帖子之一: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}
];

现在我希望能够编写如下代码,以不同方式显示一个 Elligible 人和另一个不 Elligible 人:

<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 及更高版本来执行此操作,那么分享它会很棒! :)

提前致谢

最佳答案

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

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

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

p.s. 没明白你使用 ng-repeat 的意思,因为在特定情况下,使用已经存在的指令比创建新指令并向其添加单元测试更容易它,你在哪里 我知道 ng-repeat 比较慢...

关于javascript - 如何在 Angular 1.4 及更高版本的 ng-options 中使用 ng-class,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34852231/

相关文章:

angularjs - 我可以在 Angular 服务中直接在 templateUrl 上而不是在原始 HTML 或原始 angular.element 上使用 $compile 吗?

angularjs - Angular-UI typeahead 显示特定字符

javascript - 从 AngularJS 中的 Controller 更新指令值

javascript - 表单提交后停留在同一页面

javascript - 最小的 QWebChanel 示例不起作用

javascript - 在 OnBeforeUnload 上显示函数 "True/false"的返回值

javascript - 在 AngularJS 中,为什么当指令属性的范围变量是驼峰式时需要用连字符分隔?

angularjs - 自动重定向到子状态

javascript - 在指令 angularjs 中将 ng-model 作为参数传递

javascript - 使用 ng-repeat 从对象数组中使用另一个对象的 id 属性通过 id 查找对象