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 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
javascript 面向对象编程  function是方法(函数)
Sep 17 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
Node.js 基础教程之全局对象
Aug 06 Javascript
webpack4的迁移的使用方法
May 25 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 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
晶体管来复再生式二管收音机
2021/03/02 无线电
Laravel中注册Facades的步骤详解
2016/03/16 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
IE8 chrome中table隔行换色解决办法
2010/07/09 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
Python获取文件ssdeep值的方法
2014/10/05 Python
对python中array.sum(axis=?)的用法介绍
2018/06/28 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python基于递归解决背包问题详解
2019/07/03 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python字符串反转的四种方法详解
2019/12/02 Python
Python加密模块的hashlib,hmac模块使用解析
2020/01/02 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
Python通过字典映射函数实现switch
2020/11/06 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
某公司面试题
2012/03/05 面试题
高三地理教学反思
2014/01/11 职场文书
金融保险专业求职信
2014/09/03 职场文书
新员工考核评语
2014/12/31 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
使用ICOM IC-R9500接收机同时测评十台收音机中波接收性能
2022/05/10 无线电