通过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