Angular.js - 使用 ng-options 向选项添加类 [英] Angular.js - adding a class to an option with ng-options
问题描述
有人问过类似的问题(如何使用ng-class in select with ng-options),但我也在添加我的,因为它与另一个人的问题的答案有关.
解决方案很棒,但我不太明白.
答案是创建一个指令 - http://plnkr.co/edit/rbc4GWBffi4eFYhbvS6u?p=预览.
我想做同样的事情,但添加的类应该与 items.name 相同.我该怎么做?
console.clear();var app = angular.module('angularjs-starter', []);app.controller('MainCtrl', function($scope) {$scope.items = [{ name: 'foo', id: 1, 合格: true },{ name: 'bar', id: 2, 合格: false },{ name: 'test', id: 3, 合格: true }];});app.directive('optionsClass', 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);}});});});}};});
/* CSS 放在这里 */.is-合格{颜色:绿色;}.不容忽视 {红色;}
<html ng-app="angularjs-starter"><head lang="zh-cn"><meta charset="utf-8"><title>自定义Plunker</title><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script><link rel="stylesheet" href="style.css"><脚本>document.write('<base href="' + document.location + '"/>');<script src="app.js"></script>头部><body ng-controller="MainCtrl"><select ng-model="foo" ng-options="x.name for x in items"options-class="{ 'is-eligible' : 合格, 'not-eligible': !eligible }"></select>