代码之家 › 专栏 › 技术社区 › Emre EkÅioÄlu

角度选择选项类表达式

angularjs

Emre EkÅioÄlu · 技术社区 · 8 年前

我只想用表达式更改选项背景色,例如,如果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 }
                          });

                      });

                    }
    });

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

1 回复 | 直到 8 年前

Ritesh Jagga 8 年前

你一定是从 here

1查找选项元素

find 此语句中的方法 option = elem.find('option[value="' + item.id + '"]') 尝试使用属性选择器查找,但 找到 方法 jqLite

它在您提到的问题中起作用,因为粘贴在那里的代码假设使用jQuery和 找到 jQuery中的方法允许您基于各种选择器进行查找。

`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
在选择一个选项时,突出显示围绕select元素的外部父区域,以提醒用户理解其区别,并可能附带支持文本、禁用相关区域、提交按钮等。

角度选择选项类表达式

1查找选项元素

options-class 指令

`options-class` 指令