angular 的全选全删

来源：互联网发布：php网站开发编辑：程序博客网时间：2024/06/08 20:03

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">

<input type="button" value="批量删除" ng-click="piliang()" />


<table border="1px" cellspacing="0px" cellpadding="0px">
<tr>
<td><input type="checkbox" ng-click="quan()" /></td>
<td>名字</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr ng-repeat="p in persons">
<td><input type="checkbox" name="cb" ng-click="danxuan($index)" /></td>
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td><input type="button" value="修改" ng-click="xiu()"/></td>
</tr>
</table>

<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {

var arr = [{
"name": "杨过",
"isChecked": false,
"age": 20
}, {
"name": "杨过12",
"isChecked": false,
"age": 20
}];
$scope.persons = arr;

//批量删除的时间
$scope.piliang = function() {
//遍历数组
for (var i = arr.length - 1; i >= 0; i--) {
var p = arr[i];
if (p.isChecked) {
arr.splice(i, 1);
}
}

}
//全选、反选
var flag = true;
$scope.quan = function() {
//传统
var cbs = $("input[name=cb]");
//遍历
for (var i = 0; i < cbs.length; i++) {
var cb = cbs[i];
cb.checked = flag;
//数据也要变
arr[i].isChecked = flag;
}
//置反
flag = !flag;
}
//单个复选框
$scope.danxuan = function($index) {
arr[$index].isChecked = !arr[$index].isChecked;
}

})

阅读全文

0 0

angular 的全选 全删

angular 的全选全删