Classes on :s using ng-options

Question

I have a <select> which I populate with weeks from an ajax call. Some of the items should be red (setting a class where reddays > 0).

I prefer to not use ng-repeat to output the options, because that I only experience problems with it, setting/getting ng-model and selecting an item programmatically.

Instead I want to use ng-options so I need to specify which <option>:s that have a certain class.

On the Stack Overflow page Angular.js - adding a class to an option with ng-options there is an outdated solution, as it seems, but it introduces an attribute on the <select> called options-class="{foo:num>3}".

I tried to use it in https://jsfiddle.net/AndersBillLinden/ne0z9vwm/10/

but all items becomes black.

I really want to use the whole week object as model as you probably see. Can´t I do that?

html:

<div ng-app="app" ng-controller="testController" style="height: 100%">
  Week:
  <select id="week" style="width: 60px"
    ng-change="on_week_changed()"
    ng-options="w as w.num for w in weeks"
    options-class="{redweek: reddays>0}"
    ng-model="week">
  </select>
</div>

js:

$scope.weeks =
  [
    {num: 1, reddays: 3},
    {num: 2, reddays: 0},
    {num: 3, reddays: 0},
    {num: 4, reddays: 1}
  ];
  
  $scope.on_week_changed = function()
  {
    alert($scope.week.num);
  };
  
}).directive('optionsClass', function ($parse) {
  return {
    require: 'select',
    link: function(scope, elem, attrs, ngSelect) {
      // get the source for the items array that populates the select.
      var optionsSourceStr = attrs.ngOptions.split(' ').pop(),
      // use $parse to get a function from the options-class attribute
      // that you can use to evaluate later.
        getOptionsClass = $parse(attrs.optionsClass);

        scope.$watch(optionsSourceStr, function(items) {
        // when the options source changes loop through its items.
        angular.forEach(items, function(item, index) {
          // evaluate against the item to get a mapping object for
          // for your classes.
          var classes = getOptionsClass(item),
          // also get the option you're going to need. This can be found
          // by looking for the option with the appropriate index in the
          // value attribute.
              option = elem.find('option[value=' + index + ']');
              
          // now loop through the key/value pairs in the mapping object
          // and apply the classes that evaluated to be truthy.
          angular.forEach(classes, function(add, className) {
            if(add) {
              angular.element(option).addClass(className);
            }
          });
        });
      });
    }
  };
});

css:

.redweek
{
  color: #f00;
}

Answer 1

I changed my js to not rely on the existence of the value attribute.

var angular_app = angular.module("app", ["ng"]);

angular_app.controller("testController", function ($scope)
{
    $scope.weeks =
  [
    {num: 1, reddays: 3},
    {num: 2, reddays: 0},
    {num: 3, reddays: 0},
    {num: 4, reddays: 1}
  ];
  
  $scope.week = $scope.weeks[3];
  
  $scope.on_week_changed = function()
  {
    alert($scope.week.num);
  };
  
}).directive('optionsClass', function ($parse) {
  return {
    require: 'select',
    link: function(scope, elem, attrs, ngSelect) {
      var optionsSourceStr = attrs.ngOptions.split(' ').pop(),
        getOptionsClass = $parse(attrs.optionsClass);

        scope.$watch(optionsSourceStr, function(items) {        
        var options = elem.find("option");
        angular.forEach(items, function(item, index) {
          var classes = getOptionsClass(item);
          var option = options.eq(index);
          angular.forEach(classes, function(add, className) {
            if(add) {
              angular.element(option).addClass(className);
            }
          });
        });
      });
    }
  };
});

https://jsfiddle.net/AndersBillLinden/ne0z9vwm/32/