Как использовать ng-класс в select с ng-options

Вы можете создать директиву, которая обрабатывала параметры после обработки директивы ngOptions, которая обновляла их соответствующими классами.

Обновление: в старом коде было несколько ошибок, и я кое-что узнал после того, как ответил на этот вопрос. Это планк, который был переделан в 1.2.2 (но должен работать и в 1.0.X)

Вот обновленный (30 нояб. 2013, 03:17) код:

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

Вот как вы могли бы использовать его в своей разметке:

<select ng-model="foo" ng-options="x.name for x in items" 
        options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }">
</select>

Он работает так же, как ng-class, за исключением того, что он работает для каждого элемента в коллекции.

В этом сценарии вы можете применить ng-класс только в том случае, если вы используете ng-repeat с тегами параметров:

<select ng-model="Blah">
  <option ng-repeat="person in persons" ng-class="{red: person.Eligible}">
    {{person.Name}}
  </option>  
</select>

Это даст индивидуальный класс вашим «подходящим» людям, но CSS не будет работать последовательно для разных баузеров.

Плункер.

Я хотел прокомментировать принятый ответ, но, поскольку у меня недостаточно очков репутации, я должен добавить ответ. Я знаю, что это старый вопрос, но комментарии недавно добавлены к принятому ответу.

Для angularjs 1.4.x предлагаемая директива должна быть адаптирована, чтобы она снова заработала. Из-за критического изменения в ngOptions значение параметра больше не является индексом, поэтому строка

option = elem.find('option[value=' + index + ']');

больше не будет работать.

Если вы измените код в плункере на

<select ng-model="foo" ng-options="x.id as x.name for x in items" 
        options-class="{ 'is-eligible' : eligible, 'not-eligible': !eligible }">
</select>

В результате значение тега опции теперь будет

value="number:x" (x — идентификатор объекта элемента)

Измените директиву на

option = elem.find('option[value=\'number:' + item.id + '\']');

чтобы он снова работал.

Конечно, это не общее решение, потому что что, если у вас нет идентификатора в вашем объекте? Затем вы найдете value="object:y" в своем теге option, где y — это число, сгенерированное angularjs, но с этим y вы не можете сопоставить свои элементы.

Надеется, что это поможет некоторым людям снова заставить свой код работать после обновления angularjs до 1.4.x.

Я также пытался использовать track by в ng-options, но это не сработало. Может быть, у людей больше опыта в angularjs, чем у меня (= мой первый проект в angularjs)?

Директива односторонняя, но я использовал пользовательский фильтр. Если вы знаете, как выбрать свой элемент, у вас все должно получиться. Задача состояла в том, чтобы найти текущий элемент option внутри select. Я мог бы использовать селектор «содержит», но текст в параметрах может быть не уникальным для элементов. Чтобы найти параметр по значению, я внедрил область действия и сам элемент.

<select ng-model="foo" ng-options="item.name|addClass:{eligible:item.eligible,className:'eligible',scope:this,item:item} for item in items"></select>

и в js:

var app = angular.module('test', []);

app.filter('addClass', function() {
  return function(text, opt) {
    var i;
    $.each(opt.scope.items,function(index,item) {
      if (item.id === opt.item.id) {
        i = index;
        return false;
      }
    });
    var elem = angular.element("select > option[value='" + i + "']");
    var classTail = opt.className;
    if (opt.eligible) {
      elem.addClass('is-' + classTail);
      elem.removeClass('not-' + classTail);
    } else {
      elem.addClass('not-' + classTail);
      elem.removeClass('is-' + classTail);
    }
    return text;
  }
})

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

Здесь вы можете увидеть, как это работает.

Принятый ответ у меня не сработал, поэтому я нашел альтернативу без пользовательской директивы, используя track by :

<select ng-model="foo" ng-options="x.name for x in items track by x.eligible"></select>

Каждый параметр теперь получает значение x.eligible. В CSS вы можете стилизовать параметры со значением = true (я думаю, что true должна быть строкой). CSS:

option[value="true"]{
    color: red;
}

Если вы хотите не только показать их красным цветом, но и запретить пользователю выбирать параметры, вы можете использовать disable when:

<select 
    ng-model="Blah"
    ng-options="person.Name disable when !person.Eligible for person in persons">
</select>

Затем вы можете использовать CSS, чтобы установить цвет отключенных опций.

Я не могу написать это как комментарий из-за репутации, но я обновил плункер для принятого ответа для работы с Angular 1.4.8. Спасибо Бену Лешу за оригинальный ответ, он мне очень помог. Разница, похоже, в том, что более новый Angular генерирует такие параметры:

<option class="is-eligible" label="foo" value="object:1">foo</option>

так что код

option = elem.find('option[value=' + index + ']');

не смог бы найти вариант. Мое изменение анализирует ngOptions и определяет, какое поле элемента использовалось для метки, и находит параметр на основе этого вместо значения. Видеть:

http://plnkr.co/edit/MMZfuNZyouaNGulfJn41

Я знаю, что немного опоздал на вечеринку, но для людей, которые хотят решить эту проблему с помощью чистого CSS, без использования директивы вы можете создать такой класс css:

select.blueSelect option[value="false"]{
    color:#01aac7;
}

Это правило css гласит: найти все элементы со значением = false с именем тега «option» внутри каждого «выбора», который имеет класс «blueSelect», и сделать цвет текста # 01aac7; (оттенок синего)

В вашем случае ваш HTML будет выглядеть так:

<select class="form-control blueSelect" name="persons" id="persons1"
        ng-options="person as person.name for person in $ctrl.persons track by person.Eligible"
        ng-model="$ctrl.selectedPerson" required>
    <option disabled selected value="">Default value</option>
</select>

Отслеживание внутри ng-options — это то, что будет содержать то, по чему следует отслеживать параметры, или поле «значение» каждого параметра. Обратите внимание, что в зависимости от потребностей вашего проекта вам, возможно, придется внести некоторые изменения, чтобы все работало в соответствии с вашими требованиями.

Но это не будет работать правильно, когда есть несколько вариантов с одинаковым значением для допустимого поля. Итак, чтобы это работало, мы создаем составное выражение для отслеживания, таким образом, мы можем иметь уникальные значения для отслеживания в каждой опции. В этом случае мы объединяем оба поля Name и Eligible.

Итак, теперь наш html будет выглядеть так

<select class="form-control blueSelect" name="persons" id="persons2"
        ng-options="person as person.name for person in $ctrl.persons track by (person.name + person.Eligible)"
        ng-model="$ctrl.selectedPerson" required>
    <option disabled selected value="">Default value</option>
</select>

и наш css:

select.blueSelect option[value*="False"]{
    color:#01aac7;
}

Обратите внимание на * рядом со значением, это регулярное выражение, которое означает найти слово «False» где-то в поле значения элемента option.

Быстрое редактирование. Вы также можете отключить параметры с Eligible = False, используя «отключить, когда» в выражении ng-options, например:

ярлык отключить, когда отключить для значения в < em>массив отслеживать по выражению_отслеживания

Я оставлю, как использовать это в вашем случае, чтобы вы узнали ;-)

Это работает для простых модификаций css, для более сложных вещей вам может понадобиться директива или другие методы. Проверено в хроме.

Я надеюсь, что это поможет кому-то там. :-)

Я нашел другой обходной путь, который проще, чем добавление директивы или фильтра, а именно добавление обработчика события onfocus, применяющего стиль.

angular.element('select.styled').focus( function() {
  angular.element(this).find('option').addClass('myStyle');
});