angularjs - 上课时间:s 使用 ng-options

Question

我有一个<select>来自 ajax 调用的数周。一些项目应该是红色的（设置类 where reddays > 0）。

我更喜欢不使用ng-repeat输出选项，因为我只会遇到问题，以编程方式设置/获取ng-model和选择项目。

相反，我想使用 ng-options 所以我需要指定哪些<option>:s 具有特定的类。

在 Stack Overflow 页面Angular.js - 使用 ng-options 将类添加到选项中，似乎有一个过时的解决方案，但它在被<select>调用的options-class="{foo:num>3}".

我尝试在https://jsfiddle.net/AndersBillLinden/ne0z9vwm/10/中使用它

但所有项目都变成黑色。

正如您可能看到的，我真的很想使用整周对象作为模型。我不能那样做吗？

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

我将我的 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, 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/