angularJS实现简易购物车的方法

来源：动视网责编：小采时间：2020-11-27 19:57:09

angularJS实现简易购物车的方法

angularJS实现简易购物车的方法:本文主要和大家分享angularJS实现简易购物车的方法，希望能帮助到大家。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的购物车&l

推荐度：

点击下载本文 文档为doc格式

导读angularJS实现简易购物车的方法:本文主要和大家分享angularJS实现简易购物车的方法，希望能帮助到大家。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的购物车&l

本文主要和大家分享angularJS实现简易购物车的方法，希望能帮助到大家。

<!DOCTYPE html>

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>我的购物车</title>

<script type="text/javascript" src="../js/angular.min.js" ></script>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
 <style>
 * {
 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;
 }
 </style>
 <script>
 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.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;
 }
 });
 </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h1>我的购物车</h1>
<p ng-show="shopping">您的购物车为空<a href="#" ng-click="showS()">去逛商城</a></p>
<p class="nav">
 <button ng-click="clearShpooing()" ng-show="show">清空购物车</button>
</p>
<!--创建购物车列表-->
<table ng-show="show">
 <thead>
 <th><input type="checkbox" ng-model="check" ng-click="delAll(check)"></th>
 <th>name</th>
 <th>price</th>
 <th>number</th>
 <th>totalprice</th>
 <th>option</th>
 </thead>
 <tbody>
 <!--ng-repeat渲染数据到界面-->
 <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>
 </tbody>
 <tfoot>
 <tr>
 <!--价钱起前面加"￥"-->
 <td colspan="6">总价为:{{allMoney | currency:"￥"}}</td>
 </tr>
 </tfoot>
</table>
</body>
</html>

angularJS实现简易购物车的方法

推荐度：

点击下载本文 文档为doc格式

标签： angularjs angular 实现方法

热门焦点

angularJS实现简易购物车的方法

angularJS实现简易购物车的方法

angularJS实现简易购物车的方法

最新推荐

猜你喜欢

热门推荐