我无法更改选项类属性。 OptionClass实际上起作用。我是从此站点创建的。但是我真正的代码不起作用。我不知道错误在哪里。
我只想更改带有表达式的背景颜色，例如，如果id> 100，则背景颜色为红色，等等。
我的选择
<select ng-model="firstSection" ng-options="o.label for o in options" multiple
class="invoiceSelect" options-class="{ 'is-eligible' : Id<100, 'not-eligible': !Id<100 }"></select>
我的填充方法
var myApp = angular.module('app', []);
myApp.controller('myCtrl', function ($scope, $http, $filter) {
$scope.getInvoiceByRfiPolicyId = function (rfiPolicyId) {
$http.get('http://somesitelink.com/' + rfiPolicyId)
.then(function (response) {
$scope.options = response.data.map(o=> {
return { label: 'Numbers:' + o.InvoiceNumber + ' InvDate:' + $scope.dateParse(o.InvoiceDate), value: o.InvoiceId, Id:o.InvoiceId, eligible: true }
});
});
}
});
这是我的optionClass函数
myApp.directive('optionsClass', function ($parse) {
return {
require: 'select',
link: function (scope, elem, attrs, ngSelect) {
var parts = attrs.ngOptions.split(' ');
var optionsSourceStr = parts[parts.indexOf('in') + 1];
var getOptionsClass = $parse(attrs.optionsClass);
scope.$watchCollection(optionsSourceStr, function (items) {
scope.$$postDigest(function () {
angular.forEach(items, function (item, index) {
var classes = getOptionsClass(item),
option = elem.find('option[value="' + item.id + '"]');
angular.forEach(classes, function (add, className) {
if (add) {
angular.element(option).addClass(className);
}
});
});
});
});
}
};
});
答案 0 :(得分：1)
下面的嵌入式代码段中提供了一个工作示例。
您必须已经从here获得了解决方案。所使用的代码中有两个问题：
find方法option = elem.find('option[value="' + item.id + '"]')尝试使用属性选择器进行查找，但是find的{{1}}方法（嵌入在AngularJS中）仅限于按标记查找仅命名，因此这在您的代码中不起作用。添加了一种简单的方法来查找所需的选项。
它在您提到的问题中起作用，因为粘贴到那里的代码具有与jQuery一起使用的假设，并且jQuery中的jqLite方法允许您基于各种选择器进行查找。
find指令中的表达式使用options-class对表达式进行分组，如此处(<expression>)所示，否则options-class="{ 'is-eligible' : (Id<2), 'not-eligible': !(Id<2) }"的否定运算符将首先对Id值求反，然后执行比较。
!angular.module('ExampleApp', [])
.controller('ExampleController', function($scope) {
$scope.options = [{
label: 'Numbers: Invoice001',
value: 1,
Id: 1,
eligible: true
},
{
label: 'Numbers: Invoice002',
value: 2,
Id: 2,
eligible: true
},
{
label: 'Numbers: Invoice003',
value: 3,
Id: 3,
eligible: true
}
];
})
.directive('optionsClass', function($parse) {
return {
require: 'select',
link: function(scope, elem, attrs, ngSelect) {
function findOptionByValueAttr(options, findByValue) {
for (var i = 0; i < options.length; i++) {
var option = angular.element(options[i]);
if (option.attr('value') === findByValue.toString()) {
return option;
}
}
}
var parts = attrs.ngOptions.split(' ');
var optionsSourceStr = parts[parts.indexOf('in') + 1];
console.log(attrs.optionsClass);
var getOptionsClass = $parse(attrs.optionsClass);
scope.$watchCollection(optionsSourceStr, function(items) {
angular.forEach(items, function(item, index) {
console.log(getOptionsClass(item));
var classes = getOptionsClass(item),
/*option = elem.find('option[value="' + item.Id + '"]');*/
option = findOptionByValueAttr(elem.children(), item.Id);
console.log(item);
angular.forEach(classes, function(add, className) {
if (add) {
option.addClass(className);
}
});
});
});
} // link function ends
}; // return value ends
}); // directive ends.is-eligible {
background-color: lightgreen;
}
.not-eligible {
background-color: red;
}
不建议设置选项的样式，因为这种行为在浏览器之间不一致，并且选项元素在移动设备上的呈现方式不同。
您可以检查以下设计注意事项以避免样式化：
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp" ng-controller="ExampleController">
<select ng-model="firstSection" ng-options="o.label for o in options track by o.Id" multiple class="invoiceSelect" options-class="{ 'is-eligible' : (Id<2), 'not-eligible': !(Id<2) }"></select>
</div>。希望这些会有所帮助。