如何在使用AngularJS ng选项时禁用select元素的<option>？

当我们在AngularJS中用ng-options填充options时，有没有办法在select元素中禁用option？如何在使用AngularJS ng选项时禁用select元素的<option>？

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

你可以，如果我们使用的是ng-options指令在select标签加入ng-disabled每个<option>标签做到这一点，但有没有办法做到这一点？

来源

2014-01-08 badaboum

你是什么意思的标签，而不是标签？ –

@IlanFrumer在选择标签，而不是在选项标签，我已编辑我的帖子:) – badaboum

是的，就这样做。有用。 – towr

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

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={}; 
})

来源

2014-01-08 18:31:51 towr

是的，我同意@towr，我在select标签中看不到使用ng-options的解决方案。我喜欢这个实现，它很干净，易于理解。 – NicolasMoise

它看起来像Angular 1.4的[ngOptions]（https://code.angularjs.org/1.4.0-beta.5/docs/api/ng/directive/ngOptions）将允许禁用标签禁用时.. 。' – Pakman

大概是这样的

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

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

来源

2014-01-08 17:48:37 NicolasMoise

你确定吗？ @ luacassus的jsbin例子似乎工作，他使用相同的逻辑 – NicolasMoise

@NicolasMoise是的，它工作绝对好，但我需要禁用该选项，而不是选择？任何想法？ – badaboum

@NicolasMoise需要编辑 – badaboum

您应该使用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/

来源

2014-01-08 17:52:20 luacassus

很酷的例子我有我的应用程序中的相同，但我想要的是禁用选择内的选项，而不是选择？ Capiché？ – badaboum

@badaboum yea在你的问题中根本不太清楚，写出更好的问题，你会得到更好的答案。 – NicolasMoise

@NicolasMoise我不是以英语为母语的人！和平 – badaboum

解决1.4版https://docs.angularjs.org/api/ng/directive/ngOptions [仔细检查你看V1.4文件]

来源

2015-03-28 00:19:06 Fulup

从角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得到这个代码。

来源

2016-01-26 02:52:34

这是最好的解决方案，但值得指出的一点是，它需要Angular 1.4或更高版本作为@Fulup提及。 :) – Backer

优秀的解决方案，就像一个魅力。 –

如何在使用AngularJS ng选项时禁用select元素的<option>？

回答

相关问题