Angular.js - 使用 ng-options 向选项添加类答案

【问题标题】：Angular.js - adding a class to an option with ng-optionsAngular.js - 使用 ng-options 向选项添加类
【发布时间】：2014-12-12 02:11:12
【问题描述】：

有人问过类似的问题 (How to use ng-class in select with ng-options)，但我也添加了我的，因为它与其他人的问题的答案有关。

解决方案很棒，但我不太明白。

答案是创建一个指令 - http://plnkr.co/edit/rbc4GWBffi4eFYhbvS6u?p=preview。

我也想这样做，但添加的类应该与 items.name 相同。我该怎么做？

console.clear();

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.items = [
    { name: 'foo', id: 1, eligible: true },
    { name: 'bar', id: 2, eligible: false },
    { name: 'test', id: 3, eligible: true }
    ];
});

app.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 goes here */
.is-eligible {
  color: green;
}
.not-eligible {
  color: red;
}

<!DOCTYPE html>
<html ng-app="angularjs-starter">
  
  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
    <select ng-model="foo" ng-options="x.name for x in items" 
            options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }"></select>
  </body>

</html>

提前致谢

【问题讨论】：

如果你使用 select 和 ng-repeat，那么很容易做到
在 chrome for osx 和 angular 1.2.26 上对我不起作用

标签： angularjs angularjs-directive ng-options

【解决方案1】：

使用option.text() 将此逻辑硬编码到指令中的一种方法：

      angular.element(option).addClass(option.text()); //

但是，这会忽略表达式。 http://plnkr.co/edit/46HndjYtg6HUbblnceNr?p=preview

【讨论】：

【解决方案2】：

修复

app.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/

【讨论】：

如果它对模型的变化做出反应也会很好。