11、AngularJs使用ng-checked一步实现全选或取消功能

阅读() @2018-10-29 18:16:09

AngularJs使用ng-checked一步实现全选或取消功能,代码如下:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		.ng-cloak{display:none;}
		td{height:30px;line-height:30px;padding:0px 10px;}
	</style>
</head>
<body ng-app="app" ng-controller="ctrl" ng-cloak class="ng-cloak">
	<table cellpadding="0" cellspacing="0" border="1">
		<thead>
			<tr>
				<td>
					<input type="checkbox" ng-model="all" />
					<span ng-bind="all ? '取消' : '全选'"></span>
				</td>
				<td>名称</td>
				<td>网址</td>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="v in data">
				<td><input type="checkbox" ng-checked="all" /></td>
				<td>{{v.name}}</td>
				<td>{{v.url}}</td>
			</tr>
		</tbody>
	</table>
</body>
</html>
<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
<script type="text/javascript">
	var m = angular.module('app', []);
	m.controller('ctrl', ['$scope', function($scope){
		$scope.data = [
			{'name':'赵一鸣个人博客', 'url':'http://www.zymseo.com'},
			{'name':'赵一鸣新浪博客', 'url':'http://blog.sina.com.cn/zhaoyimingtongxue'}
		]
	}]);
</script>

非常简单方便!

微信二维码