Как получить допустимую нулевую опцию с помощью select ng-options

Здесь есть пара вопросов и ответов по этой теме, но я не могу найти решение, которое работает так, как должно быть в моем случае.

Просто представьте, что у меня есть такой объект

$scope.person = {name: 'Peter', category1: null, category2: null};

В другой переменной я получаю список категорий через вызов $resource с таким результатом:

$scope.categories = [{id:1, name:'Supplier'}, {id:2, name:'Customer'}];

Теперь легко создать выборку с помощью ng-options, чтобы выбрать из categories, чтобы установить выбранный category.id как person.category1 или person.category2.

Но как мне это сделать, если category1 является обязательным, а category2 все еще может быть допустимым значением null?

Итак, в основном то, что я ищу сейчас, это два выбора со следующими параметрами:

//Select1
- Select Category1 (disabled)
- Customer (value: 1)
- Supplier (value: 2)

//Select2
- Select Category2 (disabled)
- No Category (value: null)
- Customer (value: 1)
- Supplier (value: 2)

РЕДАКТИРОВАТЬ

Я добавил Plunkr на основе @Mistalis answer, который показывает, чего я хочу достичь: каждый выбор должен иметь отключенный параметр заполнителя, и один должен поддерживать «действительный нулевой параметр».


javascript angularjs angularjs-ng-options
person LBA    schedule 20.02.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете добавить option (null) к select следующим образом:

<select ng-model="categ.selected" ng-options="c.name for c in categories">
    <option value="">No category</option>
</select>

Демо на Plunker

categ.selected может быть по умолчанию установлено значение null в вашем контроллере, если это необходимо:

$scope.categ = {"selected": null};

Обновление из комментария:

Кажется, вы не можете жестко закодировать 2 параметра в ng-options, поэтому я предлагаю вам нажать параметр «Без категории» в categories в вашем контроллере:

$scope.categories.push({id:null, name:'No category', noCat:'true'});

Обратите внимание, что noCat: 'true', который будет использоваться, не будет отображаться на первом select.

Теперь ваш HTML становится:

<select ng-model="person.category1" 
        ng-options="c.id as c.name for c in categories | filter: {noCat: '!true'}">
    <option value="" disabled>Select Category 1</option>
</select>
<select ng-model="person.category2" ng-options="c.id as c.name for c in categories">
    <option value="" disabled>Select Category 2</option>
</select>

Новый планкер

person Mistalis    schedule 20.02.2017
comment
Спасибо, я знал это, как и ответ на другой вопрос. Я взял ваш plunkr, большое спасибо, и расширил его, чтобы показать, чего я пытаюсь достичь. - person LBA; 20.02.2017
comment
Извините за недоразумение - это не решило мою проблему. Не могли бы вы проверить мой отредактированный вопрос с помощью plunkr? - person LBA; 20.02.2017

arrow_upward
0
arrow_downward

Если вам нужно проверить форму с помощью контроллера формы angular, вы не можете использовать пустое значение, оно не будет считаться действительным. Вместо этого вы должны использовать (int)0.

  <select ng-model="person.category1" ng-options="category.id as category.name for category in categories | filter: {id: '!' + 0}" required>
    <option value="">Select Category 1</option>
  </select>
  <select placeholder="Select Category 2" ng-model="person.category2" ng-options="category.id as category.name for category in categories" required>
    <option value="">Select Category 2</option>
  </select>

Если вы хотите, чтобы параметры Выбрать категорию вообще были недоступны для выбора (например, заполнитель), добавьте атрибут disabled к <option>.

Вот jsfiddle с вашим примером.

person TheSameSon    schedule 20.02.2017