AngularJs页面对表格进行查询,批量删除,计价

来源：互联网发布：java ssh协议编辑：程序博客网时间：2024/05/17 08:49

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../AngularJS/angular.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
//数据源
$scope.goods = [{
name:"鼠标",
price:12.90,
num:1,
state:false
},{
name:"键盘",
price:25.90,
num:1,
state:false
},{
name:"显示器",
price:50.90,
num:1,
state:false
},{
name:"显卡",
price:100.90,
num:1,
state:false
}];

//全选
$scope.selectAll = false;
$scope.selectAllCheck = function(){
if($scope.selectAll){
for(index in $scope.goods ){
$scope.goods[index].state = true;
}
}else{
for(index in $scope.goods ){
$scope.goods[index].state = false;
}
}
}

//反选
$scope.checkSelect = function(index){
var ck = false;
for(index in $scope.goods){
if($scope.goods[index].state == true){

}else{
ck = true;
}
}
if(ck){
$scope.selectAll = false;
}else{
$scope.selectAll = true;
}
}

//数量增加
$scope.add = function(index){
$scope.goods[index].num++;
}

//数量减少
$scope.reduce = function(index){
if($scope.goods[index].num>1){
$scope.goods[index].num--;
}else{
$scope.deletegoods();
}
}

//删除商品
$scope.deletegoods = function(index){
if(confirm("您是否将该商品移除购物车？")){
$scope.goods.splice(index,1);
}
}

//清空购物车
$scope.deleteAll = function(){
$scope.goods = [];
}

//批量删除
$scope.deleteCheck = function(){
var arr = [];
for(index in $scope.goods){
if($scope.goods[index].state){
arr.push($scope.goods[index].name);
}
}
if(arr.length>0){
for(i in arr){
for(i2 in $scope.goods){
if(arr[i] == $scope.goods[i2].name){
$scope.goods.splice(i2,1);
}
}
}
}else{
alert("请选择要删除的商品");
}
}

//总价
$scope.totalprice = function(){
var total = 0;
for(var i=0;i<$scope.goods.length;i++){
total += $scope.goods[i].price*$scope.goods[i].num;
}
return total;
}

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h2>我的购物车</h2>
<input ng-model="search" type="text" placeholder="搜索商品" style="width: 150px;" />
<button ng-click="deleteAll()" style="background-color: red; color: white; border: 1px red solid; border-radius: 3px;">清空购物车</button>
<button ng-click="deleteCheck()" style="background-color: red; color: white; border: 1px red solid; border-radius: 3px;">批量清空购物车</button><br/><br/>
<table border="1px solid" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllCheck()"></th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品小计</th>
<th>功能</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in goods | filter:search">
<td><input type="checkbox" ng-model="user.state" ng-click="checkSelect($index)"></td>
<td>{{user.name}}</td>
<td>{{user.price | currency:"￥"}}</td>
<td>
<button ng-click="reduce($index)" style="width: 20px; height: 20px; background-color: #0C60EE; color: white; border:1px #0C60EE solid; border-radius: 3px;">-</button>
<input ng-model="user.num" type="text" style="width: 30px;"/>
<button ng-click="add($index)" style="width: 20px; height: 20px; background-color: #0C60EE; color: white; border:1px #0C60EE solid; border-radius: 3px;">+</button>
</td>
<td>{{user.price*user.num | currency:"￥"}}</td>
<td><button ng-click="deletegoods()" style="background-color: #0C60EE; color: white; border:1px #0C60EE solid; border-radius: 3px;">删除</button></td>
</tr>
<tr>
<td colspan="6">总价为:<span ng-bind="totalprice() | currency:'￥'"></span></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

阅读全文

0 0