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 相关文章推荐
JQuery Dialog的内存泄露问题解决方法
Jun 18 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
Nov 26 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
在微信小程序中使用图表的方法示例
Apr 25 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数据库类
2009/05/27 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
PHP统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
PHP实现Javascript中的escape及unescape函数代码分享
2015/02/10 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP类型约束用法示例
2016/09/28 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
python基于openpyxl生成excel文件
2020/12/23 Python
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
团队经理竞聘书
2014/03/31 职场文书
主题实践活动总结
2014/05/08 职场文书
遗失说明具结保证书
2015/02/26 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA