AngularJs 终极购物车(实例讲解)


Posted in Javascript onNovember 08, 2017

废话不多说,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>购物车</title>
  <script src="angularjs/angular.js"></script>
  <style>
    .box{
      width: 100%;
      border-bottom: 1px solid silver;
    }
    .box1{
      width: 100%;
      margin-top: 5px;
    }
    .box1 button{
      width: 100px;
      height: 40px;
      background: crimson;
      color: white;
      text-align: center;
      line-height: 40px;
      float: right;
      border: 0;
      border-radius: 13px;
    }
    table{
      width: 100%;
    }
    tr td button{
      background: blue;
      color: white;
      border: 0;
    }

  </style>
  <script>
    var my=angular.module("my",[]);
    my.controller("mys",function ($scope) {
      /*声明数据对象,初始化商品信息,数据自拟且不低于四条*/
$scope.arr=[
        {name:"qq",price:12.9,number:2,state:false},
        {name:"wx",price:23.9,number:1,state:false},
        {name:"aa",price:99.9,number:1,state:false},
        {name:"bb",price:10.9,number:5,state:false}
      ];
      /*删除条目*/
$scope.del=function (index) {
        if(confirm("确定移除此项嘛?")){
          $scope.arr.splice(index,1);
        }
      }
      /*点击”+”按钮输入框中的数量加1,同时可以计算出商品小计,和购物 车总价*/
$scope.jia=function (index) {
        $scope.arr[index].number++;
      }
      /*当点击”-”按钮时输入框中的数量减1,商品小计和总价*/
$scope.jian=function (index) {
        if($scope.arr[index].number>1){
          $scope.arr[index].number--;
        }
        else if($scope.arr[index].number==1){
          if(confirm("用户是否删除该商品")){
            $scope.arr.splice(index,1);
          }
        }
      }
      /*计算总价格*/
$scope.allSum=function () {
        var allPrice=0;
        for(var i=0;i<$scope.arr.length;i++){
          allPrice+=$scope.<span style="color:#660e7a"><strong>arr</strong></span>[<span style="color:#458383">i</span>].<span style="color:#660e7a"><strong>price</strong></span>*$scope.arr[i].number;
        }
        return allPrice;
      };
      /*清空购物车*/
$scope.alldel=function () {
        if($scope.arr.length==0){
          alert("您的购物车已空");
        }else{
          $scope.arr=[];
        }
      }
      /*用户点击第一个checkbox代表全选,全选商品后点击删除选中商品,选中商品被删除,  若购物车商品被全部删除后*/
$scope.allCheck=false;
      $scope.allx= function () {
        for(var i=0;i<$scope.arr.length;i++){
          if($scope.allCheck==true){
            $scope.arr[i].state=true;
          }else {
            $scope.arr[i].state=false;
          }
        }
      };
      /*每个复选框*/
$scope.itemCheck = function () {
        var flag = 0;
        for(var i = 0; i<$scope.arr.length; i++){
          if($scope.arr[i].state == true){
            flag ++;
          }
        }
        if(flag == $scope.arr.length){
          $scope.allCheck = true;
        }else{
          $scope.allCheck = false;
        }
      };
      /*批量删除*/
$scope.pi=function () {
        for(var i=0;i<$scope.arr.length;i++){
          if($scope.arr[i].state==true){
            $scope.arr.splice(i,1);
            i--;
            $scope.allCheck = false;
          }
        }
      }
    });
  </script>
</head>
<body ng-app="my" ng-controller="mys">
  <div class="box">
    <h2>我的购物车</h2>
  </div>
  <div class="box1">
    <button ng-click="alldel()" style="margin-right: 10px">清空购物车</button><button ng-click="pi()" style="margin-left: 5px">批量删除</button>
  </div>
  <div class="box2">
    <table border="1">
      <tr>
        <th><input type="checkbox" ng-model="allCheck" ng-click="allx()"/></th>
        <th>name</th>
        <th>price</th>
        <th>number</th>
        <th>totalPrice</th>
        <th>option</th>
      </tr>
      <!--用ng-repaet指令将对象遍历并渲染到页面中-->
<tr ng-repeat="item in arr">
        <td><input type="checkbox" ng-model="item.state" ng-click="itemCheck()"/></td>
        <td>{{item.name}}</td>
        <td>{{item.price | currency:"¥:"}}</td>
        <td><button ng-click="jian($index)">-</button>
          <input type="text" value="{{item.number}}" style="width: 30px;padding-left: 20px"/>
          <button ng-click="jia($index)">+</button>
        </td>
        <td>{{item.price*item.number | currency:"¥:"}}</td>
        <td><button ng-click="del($index)">删除</button></td>
      </tr>
      <tr>
        <td colspan="6">总金额<span ng-bind="allSum()|currency:'¥:'"></span></td>
      </tr>
    </table>
  </div>
</body>
</html>

以上这篇AngularJs 终极购物车(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在jQuery中 常用的选择器介绍
Apr 16 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
element中table高度自适应的实现
Oct 21 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 #Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 #Javascript
vue-router路由与页面间导航实例解析
Nov 07 #Javascript
Vue组件开发之LeanCloud带图形校验码的短信发送功能
Nov 07 #Javascript
EasyUI实现下拉框多选功能
Nov 07 #Javascript
ES6中字符串string常用的新增方法小结
Nov 07 #Javascript
ES6中数组array新增方法实例总结
Nov 07 #Javascript
You might like
那些年一起学习的PHP(一)
2012/03/21 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
javascript延时加载之defer测试
2012/12/28 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python异常学习笔记
2015/02/03 Python
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Django自定义分页效果
2017/06/27 Python
教你学会使用Python正则表达式
2017/09/07 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Python基于WordCloud制作词云图
2019/11/29 Python
python3.8下载及安装步骤详解
2020/01/15 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
tensorflow图像裁剪进行数据增强操作
2020/06/30 Python
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
公司庆典活动邀请函
2014/01/09 职场文书
学习十八大报告感言
2014/02/04 职场文书
施工员岗位职责
2014/03/16 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
2015年行政部工作总结
2015/04/28 职场文书
公司安全管理制度范本
2015/08/05 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
PostgreSQL聚合函数介绍以及分组和排序
2022/04/12 PostgreSQL