angularJS disabled用法实例
angularJS disabled用法实例
angularJS此实例的覆盖知识点有:
1.ng-repeat的用法
2.filter的用法
3.页面显示时code转名称
4.ng-disabled在实例中的应用
5.angular.copy的应用
index2.html
<!doctype html>
<html ng-app>
<head>
<script src="lib/angular-1.0.1.js" type="text/javascript"></script>
<script src="js/script2.js"></script>
</head>
<body>
<table style="width:80%" border="1" align="center" data-ng-controller="Ctrl">
<tr>
<td style="width:5%">选择</td>
<td style="width:5%">代码</td>
<td style="width:10%">名称</td>
<td style="width:75%">描述</td>
<td style="width:5%">结果</td>
</tr>
<tr data-ng-repeat="test in list | filter:{code: 'TEST001'}">
<td><input type="checkbox" data-ng-model="test.isSelected" /></td>
<td data-ng-bind='test.code'></td>
<td data-ng-bind='test.name'></td>
<td>ABC 属于<textarea rows="1" style="width:80%" data-ng-model="test.desc" data-ng-disabled="!test.isSelected"></textarea></td>
<td data-ng-bind='handler.getStatus(test.result)'></td>
</tr>
<tr data-ng-repeat="test in list | filter:{code: 'TEST002'}">
<td><input type="checkbox" data-ng-model="test.isSelected" /></td>
<td data-ng-bind='test.code'></td>
<td data-ng-bind='test.name'></td>
<td>CDE 属于<textarea rows="1" style="width:80%" data-ng-model="test.desc" data-ng-disabled="!test.isSelected"></textarea></td>
<td data-ng-bind='handler.getStatus(test.result)'></td>
</tr>
<tr data-ng-repeat="test in list | filter:{code: 'TEST003'}">
<td><input type="checkbox" data-ng-model="test.isSelected" /></td>
<td data-ng-bind='test.code'></td>
<td data-ng-bind='test.name'></td>
<td>
<table style="width:100%">
<tr>
<td style="width:20%">XYZ 属于</td>
<td style="width:80%"><span data-ng-repeat="one in oneList"><input type="checkbox" data-ng-model="one.isChecked" data-ng-disabled="!test.isSelected"/>{{one.name}}</span></td>
</tr>
</table>
</td>
<td data-ng-bind='handler.getStatus(test.ruleResult)'></td>
</tr>
</table>
</body>
</html>
script2.js
function Ctrl($scope) { $scope.list = []; var one1 = { isChecked : false, code : '01', name : '选项1' }; var one2 = { isChecked : true, code : '02', name : '选项2' }; var one3 = { isChecked : false, code : '03', name : '选择3' }; var one4 = { isChecked : true, code : '04', name : '选择4' }; $scope.oneList = []; $scope.oneList.push(one1); $scope.oneList.push(one2); $scope.oneList.push(one3); $scope.oneList.push(one4); $scope.handler = { init : function() { var test1 = { isSelected : true, code: 'TEST001', name: '测试001', desc: '测试专用', result: '0' }; var test2 = angular.copy(test1); test2.code = 'TEST002'; test2.name = '测试002'; test2.desc = '测试暂用'; test2.result = '1'; var test3 = angular.copy(test1); test3.code = 'TEST003'; test3.name = '测试003'; test3.desc = '测试暂用'; test3.result = '1'; $scope.list.push(test1); $scope.list.push(test2); $scope.list.push(test3); }, getStatus : function(val) { return val === '0' ? '不通过' : '通过'; } }; $scope.handler.init(); }
运行效果:
勾选掉前面的勾选框,后面的描述变为disabled,当然,再勾上前面的勾选框,后面的描述变为非disabled。