使用 AngularJS ng-options 时如何禁用 select 元素的 <option> ？

StackOverflow https://stackoverflow.com//questions/21002616

题

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

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

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

有帮助吗？

解决方案

一种方法是忘记使用 ng-options 于 select 元素，并将选项添加到 with 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={};
})

其他提示

从 角度1.4 :我们可以用 disable when 在 ng-options 中，例如：

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

我从这里得到了这个代码 角度文档.

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

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

大概是这样的

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

<select ng-disabled='disableSelect'></select>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top