javascript 如何在 AngularJS 中禁用下拉列表项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20318699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable dropdown list item in AngularJS?
提问by qiushibaike
I am a beginner to AngularJS and I am making a web app that needs to disable exiting values in a dropdown list.
我是 AngularJS 的初学者，我正在制作一个需要在下拉列表中禁用退出值的网络应用程序。
I know how to do it in jQuery. It is just like this: http://jsfiddle.net/qiushibaike/FcLLn/
我知道如何在 jQuery 中做到这一点。就是这样的：http: //jsfiddle.net/qiushibaike/FcLLn/
But I don't really know how to do it in AngularJS, Should I try to disable the item or hide it? Can I set a value
但我真的不知道如何在 AngularJS 中做到这一点，我应该尝试禁用该项目还是隐藏它？我可以设置一个值吗
HTML
HTML
<select ng-model="numbers.value" required>
<option ng-repeat="item in items"> {{item.name}} </option>
</select><br/>
JavaScript
JavaScript
$scope.numbers= {};
$scope.items = [
{ id: 1, name: '11111'},
{ id: 2, name: '22222'},
{ id: 3, name: '33333'}
];
If I have something like this, how can I disable or hide the option 2 and 3 by AngularJS like what I did by using jQuery?
如果我有这样的事情，我怎样才能像我使用 jQuery 所做的那样通过 AngularJS 禁用或隐藏选项 2 和 3？
回答by Pallav Gupta
This is also possible with ngOptions.
这也可以通过 ngOptions 实现。
You just need to add "disable when" in your ng-options tag.
您只需要在 ng-options 标签中添加“ disable when”。
In your case, you can also do like this
在你的情况下，你也可以这样做
HTML
HTML
<select ng-model="numbers.value"
ng-options="var.name as var.name disable when var.disabled for var in items" required>
<option value="">-- Select --</option></select>
Javascript
Javascript
$scope.items = [
{ id: 1, name: '11111'},
{ id: 2, name: '22222', disabled: true },
{ id: 3, name: '33333', disabled: true }
]
If you want to disable any option dynamically from your code,
如果您想从代码中动态禁用任何选项，
here is a Plunkr : Dynamic Example.
这是一个Plunkr：动态示例。
回答by dutzi
Use Angular's ngDisableddirective.
使用 Angular 的ngDisabled指令。
HTML
HTML
<select ng-model="numbers.value" required>
<option ng-repeat="item in items" ng-disabled="item.disabled"> {{item.name}} </option>
</select>
Javascript
Javascript
$scope.items = [
{ id: 1, name: '11111'},
{ id: 2, name: '22222', disabled: true },
{ id: 3, name: '33333', disabled: true }
]
