使用ng-options的<option>：s上的类

如何解决使用ng-options的<option>：s上的类

我有一个2048，我用ajax调用填充了数周。 其中一些项目应为红色（在<select>处设置类）。

我宁愿不使用reddays > 0来输出选项，因为我只会遇到问题，设置/获取ng-repeat并以编程方式选择一个项目。

相反，我想使用ng-options，因此我需要指定哪些ng-model：s具有某个类。

在堆栈溢出页面Angular.js - adding a class to an option with ng-options上，似乎有一个过时的解决方案，但是它在<option>上引入了一个名为<select>的属性。

我尝试在https://jsfiddle.net/AndersBillLinden/ne0z9vwm/10/

中使用它

但所有项目都变成黑色。

我真的想像您看到的那样使用整个星期对象作为模型。 我不能那样做吗？

html：

options-class="{foo:num>3}"

js：

<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>

css：

$scope.weeks =
  [
    {num: 1,reddays: 3},{num: 2,reddays: 0},{num: 3,{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);
            }
          });
        });
      });
    }
  };
});

解决方法

我更改了我的js，使其不依赖于value属性的存在。

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,{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/