<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
</head>
<body ng-app="Mapp" ng-controller="Mcon">
商品名<input type="text" ng-model="ikind" value="" /> 价格<input type="text" ng-model="iprice" /> 数量<input type="text" ng-model="icount" />
<input type="button" ng-click="onClick()" value="添加" /><br /><input type="button" ng-click="onDelAll()" value="批量删除" />
<table border="1px" cellspacing="0" cellpadding="0">
<tr>
<th><input type="checkbox" ng-model="all" ng-click="selectAll()" /></th>
<th>商品名</th>
<th>商品数量</th>
<th>商品价格</th>
<th>总价</th>
<th>操作</th>
</tr>
<!--//循环遍历goods数组-->
<tr ng-repeat="good in goods">
<td><input type="checkbox" class="sl" ng-click="checksel($index)" /></td>
<td>{{good.kind}}</td>
<td>{{good.count}}</td>
<td>{{good.price}}</td>
<td>{{good.price*good.count}}</td>
<td><input type="button" value="删除" ng-click="del($index)" /></td>
</tr>
</table>
<script type="text/javascript">
var mapp = angular.module("Mapp", []);
mapp.controller("Mcon", function($scope) {
//给数组默认添加组数据
$scope.goods = [{
"flag": false,
"kind": "足球",
"price": 200,
"count": 5
}, {
"flag": false,
"kind": "蓝球",
"price": 1000,
"count": 3
}];
//点击添加按钮时
$scope.onClick = function() {
//给数组添加数据
//给变量flag默认false(用于批量删除判断)
$scope.goods.push({
"flag": false,
"kind": $scope.ikind,
"price": $scope.iprice,
"count": $scope.icount
})
}
//点击删除
$scope.del = function($index) {
//删除下标$index的条目
$scope.goods.splice($index, 1)
}
//点击checkbox
$scope.checksel = function($index) {
//event.target返回点击的元素
//把flag变量也改变
if(event.target.checked) {
$scope.goods[$index].flag = true;
} else {
//把全选checkbox取消选中
$scope.all = false;
$scope.goods[$index].flag = false;
}
}
//批量删除
$scope.onDelAll = function() {
$scope.all = false;
for(i = $scope.goods.length - 1; i >= 0; i--) {
//根据-变量flag的boolean值删除
if($scope.goods[i].flag) {
$scope.goods.splice(i, 1)
}
}
}
//checkbox全选
$scope.selectAll = function() {
for(var i = $scope.goods.length - 1; i >= 0; i--) {
//全选/全不选
$scope.goods[i].flag = event.target.checked;
//把每行的checkbox勾选状态也同时改变
$(".sl")[i].checked = event.target.checked;
}
}
})
</script>
</body>
</html>
AngularJS_table添加/批量删除数据
最新推荐文章于 2018-02-02 16:16:24 发布