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 相关文章推荐
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 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 学习资料零碎东西
2010/12/04 PHP
smarty表格换行实例
2014/12/15 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP扩展类型及安装方式解析
2020/04/27 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
2012/05/27 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
python实现人人网登录示例分享
2014/01/19 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
django 消息框架 message使用详解
2019/07/22 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
求职者怎样写自荐信
2014/04/13 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
竞选学委演讲稿
2014/09/13 职场文书
党的群众路线学习笔记
2014/11/06 职场文书
感谢信的格式
2015/01/21 职场文书
Python进行区间取值案例讲解
2021/08/02 Python