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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
javascript document.execCommand() 常用解析
Dec 14 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
Dom 学习总结以及实例的使用介绍
Apr 24 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
js推箱子小游戏步骤代码解析
Jan 10 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
图书管理程序(三)
2006/10/09 PHP
杏林同学录(八)
2006/10/09 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
php中文验证码实现示例分享
2014/01/12 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
javascript引导程序
2008/10/26 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Python中的魔法方法深入理解
2014/07/09 Python
python字典排序实例详解
2015/05/20 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
关于Python-faker的函数效果一览
2019/11/28 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
写给同学的新学期寄语
2015/02/27 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
分家协议书范本
2016/03/22 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js