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&nbsp;&nbsp;属于<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&nbsp;&nbsp;属于<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&nbsp;&nbsp;属于</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();
}

运行效果:
angularJS disabled用法实例
      勾选掉前面的勾选框,后面的描述变为disabled,当然,再勾上前面的勾选框,后面的描述变为非disabled。