<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.slim.js"></script> <script src="angular1.4.6.min.js"></script> <style> li { list-style-type: none; } </style> </head> <body ng-app="Myapp" ng-controller="Mycontroller"> <h1>我的购物车</h1> <button ng-click="removeAll()" style="float: right;">清空购物车</button> <button ng-click="removesome()">删除选中商品</button> <div class="container"> <div> <ul class="list-group"> <li> <input type="checkbox" ng-click="allck()"> <span>name</span> <span>price</span> <span style="margin-left: 150px;"> number </span> <span style="margin-left: 130px;">totalPrice</span> <span style="margin-left: 20px;">option</span> </li> <li ng-repeat="shop in shoplist" class="list-group-item"> <input class="one" type="checkbox" ng-click="addone($index)"> <span style="margin-left: 20px;">{{shop.name}}</span> <span style="margin-left: 20px;">¥{{shop.price}}</span> <span style="margin-left: 20px;"> <button ng-click="reduce($index)">-</button> <input type="text" ng-model="shop.num" ng-change="change($index)"> <button ng-click="add($index)">+</button> </span> <span style="margin-left: 40px;">¥{{(shop.price*shop.num)|number : 2 }}</span> <button style="margin-left: 40px;" class="bt" ng-click="removeone($index)">移除</button> </li> <li> <span>总价为:¥</span> <span ng-bind="allSum()|number : 2 "> </span> </li> </ul> </div> </div> </body> <script> //回调函数判断是否已经优值 function run(name) { var result = true; for (var i = 0; i < updatelist.length; i++) { if (name == updatelist[i]) { result == false; } } return result; } //回调函数判断是否已经优值 function run() { var result = true; if (somelist.length > 0) { result == false; } return result; } var one = true; var somelist = []; var updatelist = []; var app = angular.module("Myapp", []); //最开始添加进去的信息 app.controller("Mycontroller", function ($scope) { $scope.shoplist = [ {name: "香蕉", price: "10.10", num: 10}, {name: "菠萝", price: "14.10", num: 10}, {name: "苹果", price: "12.10", num: 10}, {name: "鸭梨", price: "11.10", num: 10}, ]; //选中之后删除所有的 $scope.allck = function () { if ($scope.shoplist.length > 0) { $(".one").attr("checked", "checked"); updatelist.push("3"); updatelist.push("2"); updatelist.push("1"); updatelist.push("0"); } }; //减少1 $scope.addone = function (index) { var name = index; if (run(name)) { updatelist.push(name); } else { for (var i = 0; i < updatelist.length; i++) { if (name == updatelist[i]) { updatelist.splice(i); } } } } //批量删除 $scope.removesome = function () { if (confirm("确定批量删除吗?")) { for (j = 0; j < updatelist.length; j++) { var i = updatelist[j]; $scope.shoplist.splice(i, 1); } } if ($scope.shoplist.length == 0) { $(".container").remove(); } } //判断不乱输入 $scope.change = function (index) { if ($scope.shoplist[index].num >= 1) { } else { alert("请输入大于0的数字"); } } //直接删除所有 $scope.removeAll = function () { $(".container").remove(); }; $scope.reduce = function (index) { if ($scope.shoplist[index].num > 1) { $scope.shoplist[index].num--; } else { if (confirm("确定删除吗?")) { $scope.shoplist.splice(index, 1); } else { $scope.shoplist[index].num = 10; } } if ($scope.shoplist.length == 0) { $(".container").remove(); } } //增加1 $scope.add = function (index) { $scope.shoplist[index].num++; } //删除一个的 $scope.removeone = function (index) { if (confirm("确定删除吗?")) { $scope.shoplist.splice(index, 1); } if ($scope.shoplist.length == 0) { $(".container").remove(); } }; //总数的和 $scope.allSum = function () { var allPrice = 0; for (var i = 0; i < $scope.shoplist.length; i++) { allPrice += $scope.shoplist[i].price * $scope.shoplist[i].num; } return allPrice; } }); </script> </html>
增删改查的列表
最新推荐文章于 2022-11-25 21:40:40 发布