Angular Select Option Выражение класса

Question

Я не могу изменить атрибут класса опции. OptionClass на самом деле работает. Я основал это с этого сайта. Но мой настоящий код не работает. Я не знаю, где ошибка.

Я хочу изменить только цвет фона параметров с помощью выражения, например, если 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

Рабочий пример приведен во фрагменте встроенного кода ниже.

Вы, должно быть, получили решение от здесь . В используемом коде есть две проблемы:

1. Поиск варианта элемента

find метод в этом выражении option = elem.find('option[value="' + item.id + '"]') пытается искать, используя селектор атрибута, но find метод jqLite (который встроен в AngularJS) ограничен поиском только по именам тегов, поэтому это не работает в вашем коде. Добавлен простой метод для поиска нужной опции.

Он работает в вопросе, который вы упомянули, потому что в вставленном коде предполагается, что он работает с jQuery, а метод find в jQuery позволяет выполнять поиск на основе различных селекторов.

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.
• При выборе параметра выделите внешнюю окружающую родительскую область, включающую элемент select, чтобы предупредить пользователя о необходимости понять разницу и может сопровождаться вспомогательным текстом, отключением соответствующих областей, кнопками отправки и т. Д.

Надеюсь, это будет полезно.