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的web页面日期格式化插件
Nov 15 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
Javascript的无new构建实例详解
May 15 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
浅谈js闭包理解
Mar 28 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
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中神奇的fastcgi_finish_request
2011/05/02 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
javascript的几种写法总结
2016/09/30 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
2017/04/19 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
Python编程中的异常处理教程
2015/08/21 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Python匿名函数及应用示例
2019/04/09 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
中学生国旗下讲话稿
2014/04/26 职场文书
贷款委托书
2014/08/01 职场文书
给老师的感谢信
2015/01/20 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python