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打造TabPanel效果代码
May 22 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
jQuery中$.fn的用法示例介绍
Nov 05 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
详解如何修改 node_modules 里的文件
May 22 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
php微信公众平台开发之微信群发信息
2016/09/13 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
js网页右下角提示框实例
2014/10/14 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
js面向对象编程总结
2017/02/16 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
FFT快速傅里叶变换的python实现过程解析
2019/10/21 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
学python需要去培训机构吗
2020/07/01 Python
办公室驾驶员岗位职责
2013/11/15 职场文书
采购文员岗位职责
2013/11/20 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
车辆委托书范本
2014/10/05 职场文书
病危通知书样本
2015/04/17 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技