angularjs购物车全选反选
来源:互联网 发布:人工智能接口 编辑:程序博客网 时间:2024/06/06 03:13
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/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购物车实现添加用户,修改用户,全选反选,批量删除
- 全选与反选_购物车
- 购物车必备全选反选
- 购物车的全选和反选
- 购物车全选,反选,结算
- 购物车,全选,反选,删除,添加
- angularJS--购物车实现全选/取消全选
- 购物车全选+单选+反选简单逻辑实现
- 类购物车的全选反选效果
- 关于购物车全选反选结算问题
- RecyclerView实现购物车的全选、反选功能
- 简单购物车Demo_全选+反选+商品计价
- Android Studio 购物车,二级目录,全选反选,计数
- Andriodjie——简单的购物车全选反选
- android studio二级购物车的反选全选
- 二级列表购物车的全选反选
- HDU
- 编程范式13听课笔记——缓冲区溢出和C++接受可变参数
- BottomTabBar的使用
- Can not drop UNDOSTBS
- BZOJ1054 移动玩具 BFS+hash
- angularjs购物车全选反选
- 取消chrome浏览器下input和textarea的默认样式
- label的作用是什么?是怎么用的?
- 如何一句话惹毛程序员
- Recvclerview上拉加载
- 阿里云搭建基于PPTP的VPN(Windows Server 2008)
- NPOI 2.0 使用教程
- 二级购物车
- 写程序学ML:Logistic回归算法原理及实现(一)