Angular实现可删除并计算总金额的购物车功能示例


Posted in Javascript onDecember 26, 2017

本文实例讲述了Angular实现可删除并计算总金额的购物车功能。分享给大家供大家参考,具体如下:

先看运行效果:

Angular实现可删除并计算总金额的购物车功能示例

Angular实现可删除并计算总金额的购物车功能示例

Angular实现可删除并计算总金额的购物车功能示例

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3water.com angular可删除与计算总额的购物车</title>
  <script src="angular.min.js"></script>
  <style>
    table{
      width: 500px;
      height: 300px;
      border-collapse: collapse;
      text-align: center;
    }
    td{
      border: 1px solid black;
    }
  </style>
  <script>
    var myapp=angular.module("myapp",[]);
    myapp.controller("myCtrl",function ($scope) {
      $scope.goods=[{
        gname:"iphone8",
        num:"3",
        price:"999"
      },{
        gname: "iphone7",
        num: "4",
        price: "599"
      },{
        gname: "iphone6",
        num: "5",
        price: "499"
      },{
        gname: "iphone5",
        num: "6",
        price: "399"
      }
      ];
      $scope.allSum=function () {
        var allPrice=0;
        for(var i=0;i<$scope.goods.length;i++){
          allPrice+=$scope.goods[i].price*$scope.goods[i].num;
        }
        return allPrice;
      };
      $scope.remove=function (index) {
        if(confirm('确定移除此项嘛?')){
          $scope.goods.splice(index,1);
        }
        if($scope.goods.length==0){
          alter('你的购物车为空');
        }
      };
    })
  </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<table>
  <tr>
    <td colspan="5">你的购物车</td>
    <tr>
  <td>商品名称</td>
  <td>数量</td>
  <td>单价</td>
  <td>小计</td>
  <td>操作</td>
  </tr>
  <tr ng-repeat="arr in goods">
    <td>{{arr.gname}}</td>
    <td>{{arr.num}}</td>
    <td>{{arr.price|currency:"RMB¥"}}</td>
    <td>{{arr.num*arr.price|currency:"RMB¥"}}</td>
    <td><button ng-click="remove($index)">删除</button></td>
  </tr>
  <tr>
    <td colspan="5">总金额<span ng-bind="allSum()|currency:'RMB'"></span></td>
  </tr>
</table>
</body>
</html>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
input 高级限制级用法
Mar 26 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
原生JS实现萤火虫效果
Mar 07 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 #Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 #Javascript
vue的一个分页组件的示例代码
Dec 25 #Javascript
jQuery图片查看插件Magnify开发详解
Dec 25 #jQuery
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 #Javascript
推荐10款扩展Web表单的JS插件
Dec 25 #Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 #jQuery
You might like
认识并使用PHP超级全局变量
2010/01/26 PHP
php自动获取目录下的模板的代码
2010/08/08 PHP
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
php显示时间常用方法小结
2015/06/05 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
2016/01/21 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
python中itertools模块zip_longest函数详解
2018/06/12 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python生成lmdb格式的文件实例
2018/11/08 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
CSS3 分类菜单效果
2019/05/27 HTML / CSS
数据库专业英语
2012/11/30 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
药学专业大学生自荐信
2013/09/28 职场文书
先进个人事迹材料
2014/01/25 职场文书
迎新晚会邀请函
2014/02/01 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
财务部副经理岗位职责
2014/03/14 职场文书
公证委托书大全
2014/04/04 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
python小型的音频操作库mp3Play
2022/04/24 Python