angularjs实现简单购物车案例（有效果图）
最终案例效果：
HTNL代码段：
<html lang="en">
<head><meta charset="UTF-8"><title>我的购物车title><link href="css/test.css" rel="stylesheet"><script src="js/angular.min.js">script><script src="js/test.js">script>
head>
<body ng-app="myapp" ng-controller="myCtrl" style="margin-left: 300px"><h1>我的购物车h1>
<p ng-show="shopping">您的购物车为空<a href="#" ng-click="showS()">去逛商城a>p>
<div class="nav"><button ng-click="clearShpooing()" ng-show="show">清空购物车button>
div>
<table ng-show="show"><thead><th><input type="checkbox" ng-model="check" ng-click="delAll(check)">th><th>nameth><th>priceth><th>numberth><th>totalpriceth><th>optionth>thead><tbody><tr ng-repeat="item in data"><td><input type="checkbox" ng-model="item.done" ng-click="checkS()">td><td>{{item.name}}td><td>{{item.price | currency:"￥"}}td><td><button ng-click="jian($index)">-button><input type="text" ng-model="item.number" ng-checked="dianji()"><button ng-click="add($index)">+button>td><td>{{item.price*item.number |currency:"￥"}}td><td><button ng-click="remove($index)">删除button>td>tr>tbody><tfoot><tr><td colspan="6">总价为:{{allMoney | currency:"￥"}}td>tr>tfoot>
table>body>
html>css代码段：* {margin: 0;padding: 0;
}table {border-collapse: collapse;
}td, th {padding: 3px;height: 50px;width: 100px;border: 1px solid gainsboro;text-align: left;
}.nav {width: 800px;text-align: right;
}tbody tr td:nth-child(4) {width: 200px;
}tbody tr td:nth-child(4) button {width: 30px;height: 30px;
}tbody tr td:nth-child(4) input {width: 30px;height: 30px;border: 1px solid gainsboro;border-radius: 5px;
}.nav button {width: 150px;height: 40px;background: red;color: white;border: 0;border-radius: 5px;
}button {width: 50px;height: 30px;background: blue;border: 0;border-radius: 5px;color: white;}a {text-decoration: none;
}angular代码段：
var myapp = angular.module("myapp", []);
myapp.controller("myCtrl", function ($scope) {//自拟商品信息$scope.data = [{"name": "qq", "price": 12.9, "number": 1, done: false},{"name": "wx", "price": 23.9, "number": 1, done: false},{"name": "wx", "price": 99.9, "number": 1, done: false},{"name": "wb", "price": 63.9, "number": 1, done: false}];//点击加号的方法$scope.add = function (index) {$scope.data[index].number++;$scope.sum();};//点击减号的方法$scope.jian = function (index) {//点击-操作时,当商品数量为1时，弹出对话框，询问是否移除if ($scope.data[index].number == 1) {if (confirm("您是否将该商品移除购物车？")) {$scope.data[index].number--;$scope.data.splice(index, 1);$scope.sum();}}else if ($scope.data[index].number > 1) {$scope.data[index].number--;$scope.sum();}};//计算商品总价的方法$scope.sum = function () {$scope.allMoney = 0;for (var i = 0; i < $scope.data.length; i++) {$scope.allMoney = $scope.allMoney + $scope.data[i].price * $scope.data[i].number;}};$scope.sum();//点击输入框的方法$scope.dianji = function () {$scope.sum();};$scope.shopping = false;//默认全选是不选的$scope.check = false;//删除全部商品的方法$scope.delAll = function (check) {$scope.checkD(check);};$scope.checkD = function (state) {for (var i = 0; i < $scope.data.length; i++) {$scope.data[i].done = state;}};//下面的选框代表$scope.checkSS = false;$scope.checkS = function () {$scope.flag = 0;for (var i = 0; i < $scope.data.length; i++) {if ($scope.data[i].done == true) {$scope.flag++;$scope.checkSS = true;}}//实现当下面全部选中，全选框选中的效果if ($scope.flag == $scope.data.length) {$scope.check = true;} else {$scope.check = false;}};//判断全选框下面的多选框有几个的方法//清空购物车的方法$scope.clearShpooing = function () {if ($scope.check == true || $scope.checkSS == true) {for (var i = 0; i < $scope.data.length; i++) {if ($scope.data[i].done == true) {$scope.data.splice(i--, 1);if ($scope.data.length == 0) {$scope.show = false;$scope.shopping = true;}$scope.sum();}}if ($scope.check == true) {$scope.data.length = 0;$scope.show = false;$scope.shopping = true;}} else {alert("请先选择要操作的商品");}};$scope.show = true;$scope.remove = function (index) {$scope.data.splice(index, 1);if ($scope.data.length == 0) {$scope.show = false;$scope.shopping = true;}};//点击去逛商城的代码$scope.showS = function () {$scope.show = true;$scope.check = false;}
});本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！