角度选择选项类表达式

Question

我无法更改选项类属性。 OptionClass 确实有效。我是从这个网站创建的。但是我的真实代码不起作用。不知道bug在哪里。

我只想通过表达式更改选项背景颜色，例如如果 id>100 则背景颜色为红色等。

我的选择

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

我的填充方法

    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 }
                          });

                      });

                    }
    });

这是我的 optionClass 函数

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

下面的嵌入式代码 sn-p 给出了一个工作示例。

您一定从here 那里得到了解决方案。使用的代码有两个问题：

1。查找选项元素

此语句中的find 方法option = elem.find('option[value="' + item.id + '"]') 尝试使用属性选择器进行查找，但jqLite（嵌入在AngularJS 中）的find 方法仅限于通过标记名称查找，因此这不起作用在你的代码中。添加了查找所需选项的简单方法。

它在您提到的问题中有效，因为粘贴在那里的代码假设使用 jQuery，并且 jQuery 中的 find 方法允许您根据各种选择器进行查找。

2。 options-class 指令中的表达式

使用(<expression>) 对表达式进行分组，如下所示options-class="{ 'is-eligible' : (Id<2), 'not-eligible': !(Id<2) }"，否则! 否定运算符将首先否定 Id 值，然后执行比较。

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>

---

设计建议

不建议对选项进行样式设置，因为这种行为在浏览器中并不一致，并且选项元素在移动设备上的呈现方式也不同。

您可以检查以下设计注意事项以避免样式化：

• 修改标签和/或禁用您最终不希望用户选择的选项。这可以使用ng-options。
• 在选择选项时，突出显示包含选择元素的外部周围父区域，以提醒用户理解差异，并可能伴随支持文本、禁用相关区域、提交按钮等。

希望这些会有所帮助。