angular (全選,全不選,刪除批量,刪除)案例
阿新 • • 發佈:2018-12-30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/angular.min.js"></script>
<title></title>
</head>
<body ng-app="app" ng-controller="ct">
<input type ="text" ng-model="gpic" placeholder="價格" />
<input type="text" ng-model="gnum" placeholder="數量" />
<input type="button" value="新增" ng-click="add()" />
<input type="button" value="批量刪除" ng-click="bigdele()" />
<table cellpadding="0px" cellspacing="0px" border="1px">
<tr>
<td><input type="checkbox" ng-click="sel()" ng-model="selectAll" /></td>
<td>價格</td>
<td>數量</td>
<td>總價</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in gs">
<td><input type="checkbox" ng-checked="xu" /></td>
<td>{{g.gname1}}</td>
<td>{{g.gnum1}}</td>
<td>{{g.gname1*g.gnum1}}</td>
<td><a href="#" ng-click="del($index)">刪除</a></td>
</tr>
</table>
<script>
var mo = angular.module("app", []);
mo.controller("ct", function($scope) {
$scope.gs = [];
$scope.add = function() {
var o = {
"gname1": $scope.gpic,
"gnum1": $scope.gnum,
"flag": false
};
$scope.gs.push(o);
}
$scope.del = function($index) {
$scope.gs.splice("$index", 1);
}
$scope.sel = function() {
for (var i = $scope.gs.length - 1; i >= 0; i--) {
$scope.gs[i].flag = $scope.selectAll;
}
$scope.xu = $scope.selectAll;
}
$scope.bigdele = function() {
for (var ii = $scope.gs.length - 1; ii >= 0; ii--) {
var p = $scope.gs[ii];
if (p.flag) {
$scope.gs.splice("ii", 1);
}
}
}
$scope.selectAll = false;
$scope.xu = $scope.selectAll;
})
</script>
</body>
</html>