如何使用select ng-options

Question

这里围绕这个主题有几个问题和答案，但我找不到一个解决方案，它的工作方式应该适用于我的案例。

想象一下，我有一个像这样的对象

$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，它显示了我想要实现的目标：每个选择都应该有一个禁用的占位符选项，一个应该支持一个＆＃34;有效的空选项＆＃34;

Answer 1

您可以使用以下内容向option添加select （null）：

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

Demo on Plunker

如果需要，

categ.selected可以在控制器中默认设置为null：

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

评论更新：

您似乎无法在ng-options中硬编码2个选项，因此我建议您在控制器的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>

New Plunker

Answer 2

如果您需要使用角度形式控制器验证表单，则无法使用空值，它不会被视为有效。您必须改为使用(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示例。