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

通过ng-options写出的下拉列表如何实现其中一个是灰色的禁选状态呢?
普通的select可以用optgroup标签,但是angular如何实现呢?
ng-options的数据是这样的

$scope.list = [{
	key: '100',
	value: '不可选'
},{
	key: '200',
	value: '第一个选项'
},{
	key: '300',
	value: '第二个选项'
}]

示例:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>angularJs</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-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="https://cdn.staticfile.org/angular.js/1.4.1/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>

注意:ng-options “disable when” 用法是从v1.4.0版本开始支持的。

参考资料
https://segmentfault.com/q/1010000011484774
https://blog.csdn.net/aigoV/article/details/78457179

发布了60 篇原创文章 · 获赞 43 · 访问量 7万+

猜你喜欢

转载自blog.csdn.net/mayue_web/article/details/99463256