您的位置：首页 > Web前端 > HTML

html angular购物车全选+全删+批量删除+单独删除+模糊查找+筛选价格区间

2017-10-20 15:28 465 查看 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>购物车</title>
<script type="text/javascript" src="js/angular.js"></script>
<!--<script src="jquery-3.2.1.js"></script>-->
<script>
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
$scope.user = [{
checked: false,
id: "1324",
name: "ipad",
price: 2000,
num: "10",
item: "0"
},
{
checked: false,
id: "4567",
name: "aphone",
price: 5000,
num: "100",
item: "1"
},
{
checked: false,
id: "3546",
name: "mypad",
price: 4400,
num: "20",
item: "2"
},
{
checked: false,
id: "1987",
name: "zpad",
price: 3000,
num: "120",
item: "3"
}
]
$scope.nc = function(index) {
if(confirm("确认删除")) {
$scope.user.splice(index, 1)
}

//					if($scope.user[index].checked == false) {
//						alert("请选中后删除");
//					} else {
//						if(confirm("确认删除")) {
//							$scope.user.splice(index, 1)
//						}
//					}

}
$scope.qs = function() {
if(confirm("确认全删")) {
$scope.user = [];
}
}

/*批量删除*/
$scope.piliang = function() {
if(confirm("确认删除?")) {
for(var i = 0; i < $scope.user.length; i++) {
if($scope.user[i].checked == true) {
$scope.user.splice(i, 1);
i--;
}
}
}
}

$scope.selectAllClick = function(sa) {
for(var i = 0; i < $scope.user.length; i++) {
$scope.user[i].checked = sa;
}
}
$scope.echoChange = function(ck, id) {
if(ck == false) {
$scope.user[id].checked = true;
} else {
$scope.user[id].checked = false;
}
}
$scope.togg = function(tit) {
$scope.title = tit;
$scope.desc = !$scope.desc;
}

//判断价格范围
$scope.size = "--请选择--";
$scope.priceSize = function(price, size) {
if(size == "--请选择--") {
return true;
} else {
var arr = size.split("-");
var priceMin = arr[0];
var priceMax = arr[1];
if(price > priceMin && price <= priceMax) {
return true;
} else {
return false;
}
}
}

});
</script>
<style>
.d {
width: 100%;
height: 50px;
background: gainsboro;
}

td {
background: white;
}
</style>
</head>

<body ng-app="myApp" ng-controller="myController">
<div class="d">
<input type="text" size="8" style="float: left;line-height: 30px" placeholder="请输入你想搜索的内容" ng-model="serch">
<button style="float: right;line-height: 30px" ng-click="qs()">全部删除</button>
<center><button style="line-height: 30px" ng-click="piliang()">批量删除</button></center>
</div>
<div>价格：
<select ng-model="size">
<option>--请选择--</option>
<option>1000-2000</option>
<option>2000-3000</option>
<option>3000-4000</option>
<option>4000-5000</option>
<option>5000-6000</option>
</select>  
</div>
<table style="width: 100%; height: 400px; background: gainsboro;margin-top: 40px" cellspacing="1px">
<tr>
<td><input type="checkbox" ng-model="selectAll" ng-click="selectAllClick(selectAll)"></td>
<td ng-click="togg('id')">商品编号</td>
<td ng-click="togg('name')">商品名称</td>
<td ng-click="togg('price')">商品价格</td>
<td ng-click="togg('num')">商品库存</td>
<td>数据操作</td>
</tr>
<tr ng-repeat="u in user|filter:serch|orderBy:title:desc" ng-if="priceSize(u.price,size)">
<!--<tr ng-repeat="u in user| filter:{name:serch} |orderBy:title:desc">-->
<td><input type="checkbox" ng-checked="u.checked" ng-click="echoChange(u.checked,$index)"></td>
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.price}}</td>
<td>{{u.num}}</td>
<td><button ng-click="nc($index)">删除</button></td>
</tr>
</table>
</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航