使用AngularJS ng-options时如何禁用选择元素的<option>？答案

【问题标题】：How to disable a <option> of select element when using AngularJS ng-options?使用AngularJS ng-options时如何禁用选择元素的<option>？
【发布时间】：2014-01-26 23:09:09
【问题描述】：

当我们在 AngularJS 中使用 ng-options 填充 options 时，有没有办法在 select 元素中禁用 option？

像这样：http://www.w3schools.com/tags/att_option_disabled.asp

您可以通过将ng-disabled 添加到每个<option> 标记来做到这一点，但是如果我们在select 标记中使用ng-options 指令，有没有办法做到这一点？

【问题讨论】：

在标签上而不在标签上是什么意思？
@IlanFrumer 在选择标签上而不是在选项标签上，我已经编辑了我的帖子:)
是的，就这么做。它有效。
@towr 我有一个选择框，其中包含来自 mongoDB 数据库的信息我使用这样的绑定：<select class="form-control input-sm" ng-model="list" ng-options="value.label for value in lists"> </select> 我想禁用选定的选项，但只是在单击按钮后跨度>
可能重复：stackoverflow.com/questions/16202254/…

标签： angularjs angularjs-directive ng-options

【解决方案1】：

一种方法是，忘记在select 元素上使用ng-options，并使用ng-repeat 添加选项，然后您可以在每个option 上添加ng-disabled 检查。

http://jsfiddle.net/97LP2/

<div ng-app="myapp">
    <form ng-controller="ctrl">
        <select id="t1" ng-model="curval">
            <option ng-repeat="i in options" value="{{i}}" ng-disabled="disabled[i]">{{i}}</option>
        </select>
        <button ng-click="disabled[curval]=true">disable</button>
    </form>
</div>

用于测试的最小控制器：

angular.module('myapp',[]).controller("ctrl", function($scope){
    $scope.options=['test1','test2','test3','test4','test5'];
    $scope.disabled={};
})

【讨论】：

是的，我同意@towr，我没有看到在选择标签中使用 ng-options 的解决方案。我喜欢这个实现，它干净且易于理解。
看起来 Angular 1.4 的 ngOptions 将允许 label disable when disable for ...
@towr 该解决方案适用于单个下拉菜单，但是如果我们从同一个 json 填充多个下拉菜单怎么办？在我的情况下，在一个下拉列表中选择的选项被禁用，但未反映在其他下拉列表中......
我认为如果列表使用相同的范围，它应该可以工作，所以这可能是问题所在。一种选择是将选项列表放入$root（可能不是最好的方法）：jsfiddle.net/2dsoh7xq

【解决方案2】：

来自 Angular 1.4 ：我们可以在 ng-options 中使用disable when，例如：

 $scope.colors = [
  {name:'black', shade:'dark'},
  {name:'white', shade:'light', notAnOption: true},
  {name:'red', shade:'dark'},
  {name:'blue', shade:'dark', notAnOption: true},
  {name:'yellow', shade:'light', notAnOption: false}
];
$scope.myColor = $scope.colors[2]; // red

此示例具有按阴影分组的颜色，其中一些已禁用：

<select ng-model="myColor" ng-options="color.name group by color.shade disable when color.notAnOption for color in colors"></select>

我从the angular documentation 得到这个代码。

【讨论】：

这是最好的解决方案，但值得指出的是，正如@Fulup 所提到的，它需要 Angular 1.4 或更高版本。 :)

【解决方案3】：

你应该使用ng-disabled指令http://docs.angularjs.org/api/ng.directive:ngDisabled。

<body ng-app="myApp">

  <div ng-controller="myCtrl">
    <form class="form-inline">
      <div class="form-group">
        <select class="form-control" ng-disabled="disableSelect">
          <option val="one">First</option>
          <option val="two">Second</option>
        </select>
      </div>

      <button class="btn btn-default" ng-click="disableSelect = !disableSelect">
        Disable select
      </button>
    </form>
  </div>

</body>

在这里你可以找到完整的例子http://jsbin.com/ihOYurO/1/

【讨论】：

很酷的例子，我在我的应用程序中有相同的，但我想要的是禁用 select 中的选项而不是 select ？卡皮切？
@badaboum 是的，你的问题根本不是很清楚，写出更好的问题，你会得到更好的答案。
@NicolasMoise 我不是以英语为母语的人！和平
@badaboum 没问题。我认为你实际上想说的是一个很好的问题。我只是希望其他人能够理解它并在未来也能链接到它。这是本网站的重点。

【解决方案4】：

使用 1.4 版解决 https://docs.angularjs.org/api/ng/directive/ngOptions [仔细检查您是否查找 v1.4 文档]

【讨论】：

【解决方案5】：

大概是这样的

<button ng-click='disableSelect=true'></button>

<select ng-disabled='disableSelect'></select>

【讨论】：

你确定？ @luacassus 的 jsbin 示例似乎有效，他使用相同的逻辑
@NicolasMoise 是的，它工作得非常好，但我需要禁用该选项而不是选择？有什么想法吗？
@NicolasMoise 需要编辑
如果您使用 ng-options 而不是手动输入选项标签，这将非常容易。在您的控制器中，您将拥有一个包含您选择的选项的数组（它们的值、标签、等等...）然后只需编写一个从该数组中删除元素的函数，并在您按下按钮时调用它。
@NicolasMoise 啊，我自己在我的 jsfiddle 中打错了字，导致它失败了，哈哈，这很讽刺。