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 相关文章推荐
javascript函数库-集合框架
Apr 27 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
Aug 13 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
jQuery实现滚动效果
Nov 17 jQuery
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
vue根据值给予不同class的实例
Sep 29 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
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
使用 Node.js 对文本内容分词和关键词抽取
2017/05/27 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
vue项目实战总结篇
2018/02/11 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
python列出目录下指定文件与子目录的方法
2015/07/03 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
python实现学生成绩测评系统
2020/06/22 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
Android面试宝典
2013/08/06 面试题
制药工程专业个人求职自荐信
2014/01/25 职场文书
红色故事演讲稿
2014/05/22 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
财务审计整改报告
2014/11/06 职场文书
教师岗位职责
2015/02/03 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python