javascript - 如何使用 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 ，它显示了我想要实现的目标:每个选择都应该有一个禁用的占位符选项，并且应该支持“有效的空选项”。

Answer 1

您可以使用以下内容将选项(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 可以在 Controller 中默认设置为 null:

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

<小时/>

评论更新:

看来您无法在 ng-options 中硬编码 2 个选项，因此我建议您在 Controller 中的 categories 中推送“无类别”选项:

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

请注意 noCat: 'true'，它将用于不在第一个选择上显示。

现在你的 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