简单的购物车

最新推荐文章于 2023-05-09 19:39:54 发布

yifeng_csdn

最新推荐文章于 2023-05-09 19:39:54 发布

阅读量176

点赞数

本文链接：https://blog.csdn.net/GGGalaxie/article/details/78827385

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../../js/angular/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.shops = [{
id: 80,
name: "iPhone",
price: 5400,
state: false
}, {
id: 1200,
name: "ipad mini",
price: 2200,
state: false
}, {
id: 500,
name: "ipad air",
price: 2340,
state: false
}, {
id: 29,
name: "ipad",
price: 1420,
state: false
}, {
id: 910,
name: "imac",
price: 6600,
state: false
}];

/*$scope.de=function(index){
//删除当前项
$scope.shops.splice(index,1);
}*/

$scope.de = function(name) {
if(window.confirm("确定要删除" + name + "吗？")) {
for(index in $scope.shops) {
if(name == $scope.shops[index].name) {
$scope.shops.splice(index, 1);
}
}
}
}

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

//反选
$scope.checkSelAll = function() {
var flag = false;
for(index in $scope.shops) {
if(!$scope.shops[index].state) {
//满足条件
flag = true;
}
}

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

//批量删除
$scope.delSelect = function() {
var selArr = [];
for(index in $scope.shops) {
if($scope.shops[index].state) {
selArr.push($scope.shops[index].name)
}
}

if(selArr.length <= 0) {
alert("请先选择");
} else {
if(window.confirm("确定要删除吗？")) {
for(index1 in selArr) {
for(index2 in $scope.shops) {
if(selArr[index1] == $scope.shops[index2].name) {
$scope.shops.splice(index2,1);
}
}
}
} else {

}
}
}
})
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>商品列表</h3>
<input type="text" placeholder="商品名称" ng-model="search" />
<select>
<option>--请选择--</option>
<option>--id正序--</option>
<option>--id逆序--</option>
<option>--价格正序--</option>
<option>--价格逆序--</option>
</select>
<button ng-click="delSelect()">批量删除</button>
<br /><br />

<table border="1px solid blue;" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
<th>产品编号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="shop in shops | filter:{name:search}">
<td><input type="checkbox" ng-model="shop.state" ng-click="checkSelAll()" /></td>
<td>{{shop.id}}</td>
<td>{{shop.name}}</td>
<td>{{shop.price}}</td>
<td width="100px">
<button ng-click="de(shop.name)">删除</button>
<button ng-click="de(shop.name)">修改</button>
</td>
</tr>
</tbody>
</table>
</center>
</body>

</html>

yifeng_csdn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的购物车

var app = angular.module("myApp", []);app.controller("myCtrl", function($scope) {$scope.shops = [{id: 80,name: "iPhone",price: 5400,state: false}, {id: 1200,name: "ipad mini",price
复制链接

扫一扫