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 相关文章推荐
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
JavaScript实现信用卡校验方法
Apr 07 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
jQuery中$.grep() 过滤函数 数组过滤
Nov 22 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
前端canvas中物体边框和控制点的实现示例
Aug 05 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,ajax实现分页
2008/03/27 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
JavaScript 比较时间大小的代码
2010/04/24 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python httplib模块使用实例
2015/04/11 Python
Python中转换角度为弧度的radians()方法
2015/05/18 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
详解flask入门模板引擎
2018/07/18 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
公务员职业生涯规划书范文  
2014/01/19 职场文书
十八大报告观后感
2014/01/28 职场文书
创业资金计划书
2014/02/06 职场文书
2014年度思想工作总结
2014/11/27 职场文书
承诺书模板大全
2015/05/04 职场文书
企业投资意向书
2015/05/09 职场文书
签证工作证明模板
2015/06/15 职场文书
离婚协议书格式范本
2016/03/18 职场文书
节约用水广告语60条
2019/11/14 职场文书