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 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
详解Vue.js动态绑定class
Dec 20 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
Vue+Flask实现图片传输功能
Apr 01 Vue.js
浅谈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删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php批量删除操作代码分享
2017/02/26 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
一则python3的简单爬虫代码
2014/05/26 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
django迁移数据库错误问题解决
2019/07/29 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
Windows和Linux动态库应用异同
2016/07/28 面试题
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
护理专业学生的求职信范文
2013/12/11 职场文书
消防器材管理制度
2014/01/28 职场文书
学校门卫管理制度
2014/01/30 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
服务员态度差检讨书
2014/10/28 职场文书
交通事故案件代理词
2015/05/23 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python