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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值