Angular Select Option Class Expression - angularjs

Question

I cant change the option class attribute. OptionClass actually work. I founded it from the this site. But my real code not work. I dont know where is the bug.
I only want to change the options background-color with expression, for example if id>100 then background color is red etc.
My Select
<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>
My Filling methods
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 }
});
});
}
});
Here is my optionClass function
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);
}
});
});
});
});
}
};
});

Answer 1

A working example is given in the embedded code snippet below.
You must have got the solution from here. There are two issues in the code used:
1. Finding option element
find method in this statement option = elem.find('option[value="' + item.id + '"]') tries to look using attribute selector but find method of jqLite (which is embedded in AngularJS) is limited to look up by tag names only so this doesn't work in your code. Added a simple method to find the required option.
It is working in the question that you referred because code pasted there had an assumption to be working with jQuery and find method in jQuery allows you to find based on a variety of selectors.
2. Expressions in options-class directive
Group the expressions using (<expression>) as shown here options-class="{ 'is-eligible' : (Id<2), 'not-eligible': !(Id<2) }", otherwise ! negation operator will first negate the Id value and then perform the comparison.
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>
Design Suggestions
Styling the options is not recommended as this behavior is not consistent across browsers and option elements are rendered differently on mobile.
You may check following design considerations to avoid styling:
Modify the label and/or disable those options which you eventually want the user to NOT select. This is possible using ng-options.
On selecting an option, highlight the external surrounding parent area enclosing the select element to alert the user to understand the difference and may accompany with a supporting text, disabling the relevant areas, submit buttons etc.
Hope these will be helpful.