[英]How to achieve a valid null-option with select ng-options
There are a couple of questions and answers around this topic here, but I cannot find a solution which is working the way it should be for my case. 关于此主题,这里有几个问题和答案,但是我找不到适合我情况的解决方案。
Just imagine I have an object like this 试想一下,我有一个这样的物体
$scope.person = {name: 'Peter', category1: null, category2: null};
In a different variable I receive a list of categories via a $resource
call with a result like this: 在另一个变量中,我通过$resource
调用接收到类别列表,结果如下:
$scope.categories = [{id:1, name:'Supplier'}, {id:2, name:'Customer'}];
Now it's easy to build a select with ng-options
to choose from categories
to set the selected category.id
as person.category1
or person.category2
. 现在,很容易使用ng-options
构建选择以从categories
进行选择,以将所选的category.id
设置为person.category1
或person.category2
。
But how can I do that when category1
is mandatory while category2
can still be a valid null value? 但是,当category1
是必需的而category2
仍然可以是有效的空值时,我该怎么做呢?
So basically what I am looking for now are two selects with the following options: 所以基本上我现在正在寻找的是带有以下选项的两个选择:
//Select1
- Select Category1 (disabled)
- Customer (value: 1)
- Supplier (value: 2)
//Select2
- Select Category2 (disabled)
- No Category (value: null)
- Customer (value: 1)
- Supplier (value: 2)
I added a Plunkr based on @Mistalis answer , which shows what I want to achieve: Each select should have a disabled placeholder option and one should support a "valid null option". 我基于@Mistalis答案添加了一个Plunkr ,它显示了我想要实现的目标:每个选择都应具有一个禁用的占位符选项,并且应该支持一个“有效的null选项”。
You can add an option
(null) to your select
with the following: 您可以使用以下option
将option
(空)添加到您的select
:
<select ng-model="categ.selected" ng-options="c.name for c in categories">
<option value="">No category</option>
</select>
categ.selected
can be default set to null in your controller if needed: 如果需要,可以在控制器categ.selected
默认设置为null:
$scope.categ = {"selected": null};
It seems you can't hard-code 2 options in a ng-options, so I suggest you to push the "No category" option in categories
in your controller: 看来您无法在ng-options中硬编码2个选项,因此我建议您在控制器的categories
中推送“ No category”选项:
$scope.categories.push({id:null, name:'No category', noCat:'true'});
Note the noCat: 'true'
that will be used to be not displayed on the first select
. 请注意, noCat: 'true'
会在第一次select
不显示。
Now your HTML becomes: 现在,您的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>
If you need to validate form with angular's form controller, you can't use empty value, it won't be considered as valid. 如果您需要使用angular的表单控制器来验证表单,则不能使用空值,它将不会被视为有效值。 You have to use (int)0
instead. 您必须改为使用(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>
If you want to make Select Category options to be unavailable to select at all (like a placholder), then add disabled
attribute to <option>
如果要使“ 选择类别”选项根本无法选择(如placholder),则将disabled
属性添加到<option>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.