购物车

最新推荐文章于 2023-05-26 14:36:40 发布

颓默

最新推荐文章于 2023-05-26 14:36:40 发布

阅读量168

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            $scope.goods=[{
                name:'笔',num:1,price:101
            },{
                name:'杯子',num:1,price:101
            },{
                name:'项链',num:1,price:101
            },{
                name:'手机',num:1,price:101
            },{
                name:'钱包',num:1,price:101
            },{
                name:'腰带',num:1,price:101
            }];

            $scope.date=[{
                name:'鼠标',num:1,price:101
            },{
                name:'键盘',num:3,price:601
            },{
                name:'主机',num:1,price:3001
            }]
            $scope.inde;
            $scope.addgoods=function (index) {
                if($scope.inde==index){
                    $scope.date[$scope.date.length-1].num++
                }else{
                    $scope.date.push({name:$scope.goods[index].name,num:$scope.goods[index].num,price:$scope.goods[index].price});
                }
                $scope.inde=index;
            }

            $scope.delete=function(index) {
                console.log(0);
                $scope.date.splice(index,1);
            }

            $scope.allmoney=function () {
                $scope.all=0;
                for(var i=0;i<$scope.date.length;i++){
                    $scope.all+=$scope.date[i].num*$scope.date[i].price;
                }
            }
            $scope.jiannum=function (index) {
                $scope.date[index].num--;
            }
            $scope.jianum=function (index) {
                $scope.date[index].num++;
            }
            $scope.clearall=function () {
//                $scope.date.splice(0,$scope.date.length);
                $scope.date.length=0;
            }
        });

    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">

<table>
    <thead>
        <th>名字</th>
        <th>价格</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in goods">
            <td>{{ item.name

}}</td>
            <td>{{item.num}}</td>
            <td><button ng-click="addgoods($index)">添加购物车</button></td>
        </tr>
    </tbody>
</table>

<h2>您的购物车</h2>
<table>
    <thead>
        <th>商品名称</th>
        <th>数量</th>
        <th>单价</th>
        <th>小计</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in date">
            <td>{{ item.name

}}</td>
            <td><button ng-click="jiannum($index)">-</button>{{item.num}}<button ng-click="jianum($index)">+</button></td>
            <td>{{item.price|currency:'RMB￥'}}</td>
            <td>{{item.price*item.num|currency:'RMB￥'}}</td>
            <td><button ng-click="delete($index)">删除</button></td>
        </tr>
    <tr>
        <td><button ng-click="allmoney()">计算总金额</button></td>
        <td>{{all}}</td>
        <td><button ng-click="clearall()">清空</button></td>
    </tr>
    </tbody>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
border-collapse: collapse;
}

td, th {
width: 200px;
border: 1px solid gainsboro;
text-align: center;
padding: 20px;
}

button {
width: 100px;
height: 40px;
background: orange;
color: white;
border: 0px;
border-radius: 5px;
}

.search {
background: ghostwhite;
border: 1px solid gainsboro;
border-radius: 5px;
width: 1450px;
height: 50px;
line-height: 50px;
margin-bottom: 10px;
}

.search input {
width: 200px;
height: 30px;
color: #999;
border-radius: 5px;
margin-left: 20px;
border: 1px solid gainsboro;
}

.search button {
float: right;
margin-top: 5px;
margin-right: 10px;
background: red;
}

.active {
color: red;
}
</style>
<script src="angular.js"></script>
<script>
var data =
[{"id": 1234, "name": 'ipad', "price": 3400, "count": 10},
{"id": 1244, "name": 'aphone', "price": 6400, "count": 100},
{"id": 1334, "name": 'mypad', "price": 4400, "count": 20},
{"id": 8234, "name": 'zpad', "price": 8400, "count": 130},
];
var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function ($scope) {
$scope.data = data;
//设置页面默认显示
$scope.show = true;
//设置checkbox默认不选中
$scope.chk = false;
$scope.xuanz = false;
$scope.check = function (val) {
/*判断是否选中，然后控制下方的是否选中*/
if (val) {
$scope.xuanz = true;
} else {
$scope.xuanz = false;
}
}
$scope.search;
/*删除按钮*/
$scope.remove = function (index) {
/*判断是否确认删除*/
var b = confirm("确认删除");
if (b) {
$scope.data.splice(index, 1);
}
}
$scope.del = function () {
/*判断是否确认删除*/
if ($scope.xuanz || $scope.checkD) {
var b = confirm("确认删除");
if (b) {
//删除所有商品信息
if ($scope.chk) {
$scope.data.splice(0, $scope.data.length);
//让商品信息管理页面为空白界面
$scope.show = false;
} else {
for (var i = $scope.xuan1.length - 1; i >= 0; i--) {
console.log($scope.xuan1[i]);
for (var j = 0; j < $scope.data.length; j++) {
console.log($scope.data[j].id == $scope.xuan1[i]);
if ($scope.data[j].id == $scope.xuan1[i]) {
$scope.data.splice(j, 1);
}
}
}
}
}
} else {
alert("先进行选中要删除的商品信息");
}
}
$scope.checkD = false;
$scope.xuan1 = [];
$scope.xuan = function (xuanl, id) {
console.log(id);
$scope.checkD = xuanl;
if (xuanl) {
$scope.xuan1.push(id);
}
}
//判断的功能,默认是名字排序
$scope.sort = "name";
$scope.active = name;
$scope.rese = false;
$scope.sort1 = function (sort) {
$scope.active = sort;
console.log(sort);
if ($scope.sort == sort) {
$scope.rese = !$scope.rese;
}
else {
$scope.rese = false;
}
$scope.sort = sort;
}

})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<div class="search">
<input type="text" placeholder="输入关键字…" ng-model="search">
<button ng-click="del()">批量删除</button>
</div>

<table ng-show="show">
<thead>
<th><input type="checkbox" ng-model="chk" ng-click="check(chk)"></th>
<th ng-click="sort1('id')" ng-class="{active:active=='id'}">商品编号</th>
<th ng-click="sort1('name')" ng-class="{active:active=='name'}">商品名称</th>
<th ng-click="sort1('price')" ng-class="{active:active=='price'}">商品价格</th>
<th ng-click="sort1('count')" ng-class="{active:active=='count'}">商品库存</th>
<th>数据操作</th>
</thead>
<tbody>

<tr ng-repeat="item in data| filter:search | orderBy:sort:rese ">
<td><input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)"></td>
<td>{{item.id}}</td>
<td> {{item.name}}</td>

<td>{{item.price | currency:"￥"}}</td>
<td>{{item.count}}</td>
<td>
<button ng-click="remove($index)">删除</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
.non{
display: none;
}
.font{
color:red;
}
</style>
<script src="angular-1.5.5/angular.min.js"></script>
<script>
var myapp = angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.orderName = "index";//排序的字段
$scope.order = false;//排序的方向
$scope.allCheck = false;//全部选中框
$scope.isCheck = false;//单选框
$scope.search = "";//模糊查询
$scope.items = [
{
index:1234,
name:"ipad",
price:3400,
num:10,
check:false
},
{
index:1244,
name:"aphone",
price:6400,
num:100,
check:false
},
{
index:1334,
name:"mypad",
price:4400,
num:20,
check:false
},
{
index:8234,
name:"zpad",
price:6400,
num:130,
check:false
}
];
//删除单个
$scope.delete = function (index) {
var isDelete = confirm("确定删除？");
if(isDelete){
for(var i = 0; i<$scope.items.length; i++){
if ($scope.items[i].index == index){
$scope.items.splice(i,1);
}
}
}

};
//删除全部
$scope.checkAll = function () {
if($scope.allCheck == true){
for(var i = 0; i<$scope.items.length; i++){
$scope.items[i].check = true;
}
}else{
for(var i = 0; i<$scope.items.length; i++){
$scope.items[i].check = false;
}
}
};
//每个复选框
$scope.itemCheck = function () {
var flag = 0;
for(var i = 0; i<$scope.items.length; i++){
console.log($scope.items[i].check);
if($scope.items[i].check == true){
flag ++;
}
}
if(flag == $scope.items.length){
$scope.allCheck = true;
}else{
$scope.allCheck = false;
}
};
//删除全部
$scope.deleteAll = function () {
var is = confirm("是否删除");
if (is == true){
var arr = [];
for(var i = 0; i<$scope.items.length; i++){
if($scope.items[i].check == false){
arr.push($scope.items[i]);
}
}
$scope.items = arr;
}
};
//添加类
$scope.addClass = function () {
if($scope.items == ""){
return "non";
}
};
//改变排序方向和字段
$scope.changeOrder = function (orderName) {
if($scope.orderName == orderName){
$scope.order = !$scope.order;
}
$scope.orderName = orderName;
};
//变色
$scope.addClas = function (orderName) {
if (orderName == $scope.orderName){
return "font";
}

}
});
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl" ng-class="addClass()">
<input type="text" placeholder="输入关键字...." ng-model="search">
<button style="background: red;" ng-click="deleteAll()">批量删除</button>
<table>
<thead>
<tr>
<th><input type="checkbox" ng-model="allCheck" ng-click="checkAll()"></th>
<th ng-click="changeOrder('index')" ng-class="addClas('index')">商品编号</th>
<th ng-click="changeOrder('name')" ng-class="addClas('name')">商品名称</th>
<th ng-click="changeOrder('price')" ng-class="addClas('price')">商品价格</th>
<th ng-click="changeOrder('num')" ng-class="addClas('num')">商品库存</th>
<th>数据操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | filter:search | orderBy:orderName:order">
<td><input type="checkbox" ng-model="item.check" ng-click="itemCheck()"></td>
<td>{{item.index}}</td>
<td>{{item.name}}</td>
<td>{{item.price | currency:"￥"}}</td>
<td>{{item.num}}</td>
<td><button ng-click="delete(item.index)">删除</button></td>
</tr>
</tbody>
</table>
</body>
</html>

颓默

关注

0
点赞
踩
0

收藏

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

Title var myapp=angular.module("myapp",[]); myapp.controller("myCtrl",function ($scope) { $scope.goods=[{ name:'笔',num:1,price:101
复制链接

扫一扫