javascript 如何禁用从 Angular JS 下拉列表中选择特定选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22005601/
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 can I disable to select the particular option from Angular JS dropdown?
提问by prince
I want to disable a particular option from AngularJS dropdown.
我想从 AngularJS 下拉列表中禁用特定选项。
It should be listed in the dropdown but should not allow it to be selected. So i need to disable it.
它应该列在下拉列表中，但不应允许它被选中。所以我需要禁用它。
MyFile.tpl.html
我的文件.tpl.html
<select class="form-control" ng-model="selectedFruits"
ng-options="fruit as fruit.name for fruit in fruits">
</select>
MyController.js
我的控制器.js
$scope.fruits = [{'name': 'apple', 'price': 100},{'name': 'guava', 'price': 30},
{'name': 'orange', 'price': 60},{'name': 'mango', 'price': 50},
{'name': 'banana', 'price': 45},{'name': 'cherry', 'price': 120}];
Here all the fruit names should be listed in the dropdown but mangoand cherryshould be disabled and should not allow the user to select it.
这里所有的水果名称都应该列在下拉列表中，但是芒果和樱桃应该被禁用并且不允许用户选择它。
Is it possible? If possible, please let me know the solution please.
是否可以？如果可能，请让我知道解决方案。
回答by Klaster_1
selectoptions are disabled with disabledattribute. Since ng-optionsdoesn't support disabling, you'll have to generate options within ng-repeatand set ng-disabledbased on requirements.
select选项被disabled属性禁用。由于ng-options不支持禁用，您必须根据要求在其中生成选项ng-repeat并设置ng-disabled。
Template:
模板：
<select class="form-control" ng-model="selectedFruits">
<option
ng-repeat="fruit in fruits"
ng-disabled="disabledFruits.indexOf(fruit.name) !== -1"
ng-value="fruit">
{{fruit.name}}
</option>
</select>
Inside controller:
内部控制器：
$scope.disabledFruits = ["mango", "cherry"]
JSB.
回答by vidriduch
Just came across this and it worth mentioning that this is possible as of Angular version 1.4.0-rc.1
刚刚遇到这个，值得一提的是，从 Angular 版本 1.4.0-rc.1 开始这是可能的
here are docs ngOptions
这是文档ngOptions
and some conversations Angular Github
和一些对话Angular Github
HTML:
HTML：
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testController">
<select ng-model="myPerson" ng-options="person.name disable when person.isDisabled for person in people">
</select>
</body>
</html>
JS:
JS：
var app = angular.module("testApp", []);
app.controller("testController", function($scope) {
$scope.people = [{
"id": "0",
"name": "Homer",
"surname": "Simpson",
"isDisabled": false
}, {
"id": "1",
"name": "Peter",
"surname": "Griffin",
"isDisabled": false
}, {
"id": "2",
"name": "Philip",
"surname": "Fry",
"isDisabled": false
}, {
"id": "3",
"name": "Humpty",
"surname": "Dumpty",
"isDisabled": true
}, ];
$scope.myPerson = $scope.people[2];
});
and Plunker
和普朗克
If you set disabled value as default it wont work and you will see blank selected item instead.
如果您将禁用值设置为默认值，它将不起作用，您将看到空白的选定项目。
