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

у меня есть массив объектов person

var persons = [
{Name:'John',Eligible:true},
{Name:'Mark',Eligible:true},
{Name:'Sam',Eligible:false},
{Name:'Edward',Eligible:false},
{Name:'Michael',Eligible:true}
];

и я использую select с ng-options, как это:

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

Я хочу показать запись с право: false на красный цвета. Итак, проблема в том, как использовать ng-class на select inorder для достижения этого? Так как мы не используем никаких option тег, он не будет работать, если я просто добавьте ng-class на элемент.

36
angularjs ng-class select

9 ответов

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

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

здесь обновлено код:

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, за исключением того, что он находится на основе каждого элемента в коллекции.

32

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

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

это даст пользовательский класс, чтобы ваши права лиц, но CSS не будет стабильно работать на автотопливозаправщик.

Plunker.

13

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

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

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

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

если вы измените код в plunker, чтобы

<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-идентификатор объекта item)

изменить директиву

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

чтобы заставить его работать снова.

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

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

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

4

директива-это один из способов, но я использовал пользовательский фильтр. Если вы знаете, как выбрать элемент, вы должны быть в порядке. Задача заключалась в том, чтобы найти текущий элемент 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}
  ];
 });

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

3

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

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

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

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

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

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

затем вы можете использовать CSS, чтобы изменить цвет опции.

3

Я не могу написать это как комментарий из-за репутации, но я обновил планкер для принятого ответа на работу с 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

2

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

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

это правило css говорит : Найдите все элементы со значением = false с именем тега "option" внутри каждого "select", который имеет класс" 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>

след мимо внутри НГ-вариантов это то, что будет содержать, что отслеживать параметры, или поле "значение" каждого параметра. Обратите внимание , что в зависимости от ваших потребностей проекта вам может потребоваться некоторая настройка, чтобы сделать эту работу в соответствии с вашими требованиями.

но это не будет работать правильно, когда есть несколько вариантов с одинаковым значением для подходящего поля. Чтобы сделать эту работу, мы создаем составное выражение для отслеживания, таким образом, мы можем иметь уникальные значения для отслеживания в каждом варианте. В этом случае мы объединяем оба поля Имя и право

Итак, теперь наш 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.

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

метка отключить при отключить на стоимостью на массив след trackexpr

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

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

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

2

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

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