angular.js实现购物车功能


Posted in Javascript onOctober 23, 2017

本文实例为大家分享了angular.js购物车功能的具体代码,供大家参考,具体内容如下

<!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.arr[i].price*$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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
自己开发Dojo的建议框架
Sep 24 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
js实现分页功能
May 24 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
使用store来优化React组件的方法
Oct 23 #Javascript
node文件批量重命名的方法示例
Oct 23 #Javascript
详解vue 实例方法和数据
Oct 23 #Javascript
深入浅析javascript继承体系
Oct 23 #Javascript
Vue.js组件通信的几种姿势
Oct 23 #Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 #Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 #Javascript
You might like
用libTemplate实现静态网页的生成
2006/10/09 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
php实现的后台表格分页功能示例
2017/10/23 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
Django获取应用下的所有models的例子
2019/08/30 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Python continue语句实例用法
2020/02/06 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
基于Python绘制个人足迹地图
2020/06/01 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
微型企业创业投资计划书
2014/01/10 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
2014年终工作总结范本
2014/12/15 职场文书
小学生暑假生活总结
2015/07/13 职场文书
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL