ng-options 如何实现其中一项option禁选

通过ng-options写出的下拉列表如何实现其中一个是灰色的禁选状态呢？
普通的select可以用optgroup标签，但是angular如何实现呢？
ng-option的数据是这样的
$scope.list = [{

key: '100',
value: '不可选'

},
{

key: '200',
value: '第一个选项'

},
{

key: '300',
value: '第二个选项'

}]

看了大牛发的网址我把我的ng-option改了
ng-options="item.value group by item.value for item in list"

然后显示的效果
图片描述

disable的代码
图片描述

html5 html angularjs

阅读 4.6k

2 个回答

smart_dream

✓ 已被采纳

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>angularJs</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <style>
  body{font-size:14px;line-height:1.42857143;color: #000;}
  .container{margin-top:100px;}
  </style>
  <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div class="container" ng-controller="myCtrl">
  <select class="form-control" ng-model="functionPaymentMethod" ng-options="n.key as n.value disable when n.disabled for n in paymentMethod" required>
    <option value="" disabled>请选择</option>
  </select>
</div>
<script>
  angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.paymentMethod =[
      {key: '100', value: '余额支付'},
      {key: '200', value: '信用支付'},
      {key: '300', value: '合同支付'}];
    angular.forEach($scope.paymentMethod, function(item, index) {
      if (item.key=== '300') {
        item.disabled = true;
      }
    });
  });
</script>
</body>
</html>