如何禁用从 Angular JS 下拉列表中选择特定选项？答案

【问题标题】：How can I disable to select the particular option from Angular JS dropdown?如何禁用从 Angular JS 下拉列表中选择特定选项？
【发布时间】：2014-02-25 05:42:42
【问题描述】：

我想从 AngularJS 下拉菜单中禁用特定选项。

它应该列在下拉列表中，但不应允许它被选中。所以我需要禁用它。

MyFile.tpl.html

<select class="form-control" ng-model="selectedFruits" 
        ng-options="fruit as fruit.name for fruit in fruits">
</select>

MyController.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}];

这里所有的水果名称都应该在下拉列表中列出，但是 mango 和 cherry 应该被禁用并且不允许用户选择它。

有可能吗？如果可能，请告诉我解决方案。

【问题讨论】：

jsfiddle.net/alalonde/dZDLg/5

标签： javascript angularjs html-select

【解决方案1】：

select 选项被 disabled 属性禁用。由于ng-options 不支持禁用，您必须在ng-repeat 中生成选项并根据要求设置ng-disabled。

模板：

<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>

内部控制器：

$scope.disabledFruits = ["mango", "cherry"]

JSBin.

【讨论】：

【解决方案2】：

刚刚遇到这个，值得一提的是，从 Angular 版本 1.4.0-rc.1 开始，这是可能的

这里是文档ngOptions

还有一些对话Angular Github

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：

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];
});

和Plunker

如果您将禁用值设置为默认值，它将不起作用，您将看到空白的选定项目。

【讨论】：