<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="angular-1.3.0.js"></script> <script> var myapp=angular.module("myapp",[]); var data=[ { done:false, name:"小米", price:666, count:2, }, { done:false, name:"华为", price:888, count:1, }, { done:false, name:"苹果", price:299, count:5, }, { done:false, name:"小辣椒", price:555, count:1, }, { done:false, name:"坚果", price:1999, count:5, } ] myapp.controller("myCtrl",function ($scope) { $scope.data=data; $scope.num=0; //实际付款 $scope.money=function () { $scope.numsn=0; if( $scope.num>9999) { $scope.numsn=$scope.num; } else { if($scope.numsn!=0) { $scope.numsn=$scope.num+10; } } return $scope.numsn; } //判断是否包邮 $scope.baoyou=function () { $scope.nums=""; if( $scope.num>9999) { $scope.nums="包邮"; } else { $scope.nums="十元"; } return $scope.nums; } //商品总价 $scope.counts=function () { $scope.num=0; $scope.n=0; for(var i=0;i<$scope.data.length;i++) { if($scope.data[i].done==true) { $scope.num+=$scope.data[i].price*$scope.data[i].count; $scope.n++; } } /* if($scope.n==$scope.data.length) { $scope.chec=true; }*/ } /*删除*/ $scope.del=function (name) { for(var i=0;i<$scope.data.length;i++) { if($scope.data[i].name==name) { $scope.data.splice(i,1); } } } //删除选中的 $scope.delall=function () { for(var i=0;i<$scope.data.length;i++) { if($scope.data[i].done==true) { $scope.data.splice(i,1); i--; } } } //小计 $scope.xj=function (a,b) { $scope.nums=a*$scope.data[b].price; $scope.counts(); return $scope.nums; } //点击全选 $scope.checkAll=function () { for(var i=0;i<$scope.data.length;i++) { if($scope.chec==true) { $scope.data[i].done=true; } else{ $scope.data[i].done=false; } } $scope.num=0; for(var i=0;i<$scope.data.length;i++) { if($scope.data[i].done==true) { $scope.num+=$scope.data[i].price*$scope.data[i].count; } } } }) </script> </head> <body ng-app="myapp" ng-controller="myCtrl"> <button ng-click="delall()">删除选中的</button> <table border="1" bordercolor="#000000" width="500" cellpadding="0" cellspacing="0"> <thead> <tr> <th>全选<span><input type="checkbox" ng-click="checkAll()" ng-model="chec"></span></th> <th>商品名称</th> <th>单价</th> <th>购买数量</th> <th>小计</th> <th> </th> </tr> </thead> <tbody> <tr ng-repeat="item in data"> <td><input type="checkbox" ng-model="item.done" ng-click="counts()"></td> <td>{{item.name}}</td> <td>{{item.price}}</td> <td><input type="number" ng-model="item.count"></td> <td>{{xj(item.count,$index)|currency:"RMB"}}</td> <td><button ng-click="del(item.name)">删除</button></td> </tr> </tbody> </table> <div>商品总价:<span>{{num}}</span></div> <div>邮费:<span>{{baoyou()}}</span></div> <div>实际付款:<span>{{money()}}</span></div> </body> </html>
angularjs购物车
最新推荐文章于 2017-10-25 08:26:08 发布