AngularJS购物车功能增加/删除/价格的计算
来源:互联网 发布:eui魔兽盒子mac版 编辑:程序博客网 时间:2024/04/29 21:52
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>AngularJS购物车功能增加/删除/价格的计算</title> <script type="text/javascript" src="AngularJS/angular.js" ></script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){ $scope.shops = [{ name:"qq1", price:12.9, num:3, state:false },{ name:"wx1", price:22, num:5, state:false },{ name:"qq2", price:33, num:6, state:false },{ name:"wx2", price:44, num:4, state:false }]; //增加 $scope.add = function(index){ $scope.shops[index].num += 1; } //减少 $scope.reduce = function(index){ if($scope.shops[index].num>1){ $scope.shops[index].num -= 1; }else{ if(window.confirm("要删除"+$scope.shops[index].name+"吗?")){ $scope.shops.splice(index,1); }else{ } } } //获取总价 $scope.allPrice = function(){ var all = 0; for(index in $scope.shops){ all += $scope.shops[index].price * $scope.shops[index].num; } return all; } //全选 $scope.selectAll = false; $scope.selectAllFun = function(){ if($scope.selectAll){ for(index in $scope.shops){ $scope.shops[index].state = true; } }else{ for(index in $scope.shops){ $scope.shops[index].state = false; } } } //反选 $scope.checkSelectAll = function(){ var flag = false; for(index in $scope.shops){ if($scope.shops[index].state){ }else{ flag = true; } } //至少有一个没有被选中 if(flag){ $scope.selectAll = false; }else{ $scope.selectAll = true; } } //批量删除 $scope.deleteSelected = function(){ var selectedShop = []; for(index in $scope.shops){ if($scope.shops[index].state){ selectedShop.push($scope.shops[index].name); } } if(selectedShop.length>0){ for(i1 in selectedShop){ for(i2 in $scope.shops){ if(selectedShop[i1] == $scope.shops[i2].name){ $scope.shops.splice(i2,1); } } } }else{ alert("请先选择") } } //判断数据源的长度 $scope.getSize = function(){ if($scope.shops.length > 0 ){ return false; }else{ return true; } } }); </script></head><body ng-app="myApp" ng-controller="myCtrl"><center> <h3>我的购物车</h3> <button ng-click="deleteSelected()">批量删除</button><br /><br /> <table ng-hide="getSize()" border="1 solid blue" cellpadding="10" cellspacing="0"> <thead> <tr> <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th> <th>name</th> <th>price</th> <th>number</th> <th>totalPrice</th> <th>option</th> </tr> </thead> <tbody> <tr ng-repeat="shop in shops"> <td><input type="checkbox" ng-model="shop.state" ng-click="checkSelectAll()"/></td> <td>{{shop.name}}</td> <td>{{shop.price | currency:"¥"}}</td> <td> <button ng-click="reduce($index)">-</button> <input type="number" ng-model="shop.num" style="width: 30px;"/> <button ng-click="add($index)">+</button> </td> <td>{{shop.price * shop.num | currency:"¥"}}</td> <td><button>删除</button> </td> </tr> <tr> <td colspan="6">总价为:<span ng-bind="allPrice() | currency:'¥'"></span></td> </tr> </tbody> </table> <span ng-show="getSize()">您的购物车为空,请先逛<a href="#">购物车</a></span></center></body></html>
阅读全文
0 0
- AngularJS购物车功能增加/删除/价格的计算
- Angularjs购物车计算价格例子
- JavaScript实现购物车计算价格功能
- AngularJs购物车删除和计算总金额
- AngularJs购物车删除和计算总金额
- Android-----购物车(包含侧滑删除,商品筛选,商品增加和减少,价格计算,店铺分类等)
- 购物车数量价格计算
- 购物车,计算价格,tian
- AngularJS实现购物车功能,表格的删除,查询,排序功能
- 购物车增加删除
- angularjs实现的购物车功能
- angularjs实现购物车的一些功能
- 增加购物车功能
- vue--购物车+计算价格+自定义过滤器
- angularjs制作购物车功能
- angularJS实现购物车功能
- 属性动画+购物车+全选反选+选中计算价格+单个删除
- 购物车,增加,删除,总价
- Linux常用命令搜集
- Qt学习17——初识数据库SQLite(中)
- Mybatis一级、二级缓存
- 如何在调试页面的时候优雅的关闭缓存
- angular添加,查询,等批量操作
- AngularJS购物车功能增加/删除/价格的计算
- Introduction to SIFT (Scale-Invariant Feature Transform)
- Entity Framework 数据生成选项DatabaseGenerated
- 我的购物车
- 阿里巴巴Java开发规约IDEA插件使用
- [目标检测]RCNN算法详解
- andorid引入dbflow踩的坑
- window.open()打开窗口的几种方式
- 网络编程- 客户端(select) 服务端 epoll