<!DOCTYPE html> <html ng-app="shopping"> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css"/> <style type="text/css"> .orderSelect { color: red; } </style> </head> <body> <div class="container"> <div ng-controller="goodsList"> <nav class="navbar navbar-default" role="navigation"> <form class="navbar-form navbar-left" role="search"> <input type="text" ng-model="search" class="form-control" placeholder="搜索"> </form> </nav> <table class="table table-bordered table-hover" ng-show="goods.length"> <thead> <tr class="success"> <!--ng-class="{dropup: order===''}"的这个部分order===''是一个表达式如果为真则添加前面的样式--> <th ng-click="orderGoods('id')" ng-class="{dropup: order===''}"> 产品编号<span class="caret" ng-class="{orderSelect: orderType==='id'}" ></span> </th> <th ng-click="orderGoods('name')" ng-class="{dropup: order===''}"> 产品名字<span class="caret" ng-class="{orderSelect: orderType==='name'}" ></span> </th> <th ng-click="orderGoods('sum')" ng-class="{dropup: order===''}"> 购买数量<span class="caret" ng-class="{orderSelect: orderType==='sum'}"></span> </th> <th ng-click="orderGoods('unitPrice')" ng-class="{dropup: order===''}"> 产品单价<span class="caret" ng-class="{orderSelect: orderType==='unitPrice'}" ></span> </th> <th ng-click="orderGoods('unitPrice * sum')" ng-class="{dropup: order===''}"> 产品总价<span class="caret" ng-class="{orderSelect: orderType==='unitPrice * sum'}" ></span> </th> <th> 操作 </th> </tr> </thead> <tbody> <!--可以使用过滤器提供搜索功能->filter: {name:search}--> <tr class="info" ng-repeat="item in goods | filter: {name:search} | orderBy: order + orderType"> <td><span ng-bind="item.id"></span></td> <td><span ng-bind="item.name"></span></td> <td> <input type="button" value="-" class="btn" ng-click="subNumber(item.id)"/> <input type="text" class="text-center" ng-model="item.sum"/> <input type="button" value="+" class="btn" ng-click="addNumber(item.id)"/> </td> <!--过滤器 {{xxx | currency:'￥ '}}--> <td><span ng-bind="item.unitPrice | currency:'￥ '"></span></td> <td><span ng-bind="item.sum * item.unitPrice | currency:'￥ '"></span></td> <td><input type="button" value="移除" class="btn btn-danger" ng-click="remove(item.id)"/></td> </tr> <tr class="warning"> <td colspan="2">购买总价：<span ng-bind="sumPricesFn() | currency:'￥ '"></span></td> <td colspan="2">购买总数：<span ng-bind="sumFn()"></span></td> <td colspan="2"><input type="button" value="清空购物车" class="btn btn-danger" ng-click="clear()"/></td> </tr> </tbody> </table> <div ng-show="!goods.length">您的购物车为空！</div> </div> </div> </body> <script src="../angular.js"></script> <script> var app=angular.module("shopping",[]); app.controller("goodsList", function($scope){ $scope.goods=[ { id:1, name:'苹果6Plus', sum:3, unitPrice:5000 }, { id:2, name:'苹果5s', sum:1, unitPrice:4000 }, { id:3, name:'lenovo P404', sum:1, unitPrice:3899 }, { id:4, name:'飞科剃须刀f77', sum:10, unitPrice:100 }, { id:5, name:'情侣体恤', sum:2, unitPrice:110 } ]; //单件商品总价 $scope.sumPricesFn = function(){ var sumPrices = 0; angular.forEach($scope.goods,function(item){ sumPrices += item.sum * item.unitPrice; }); return sumPrices; }; //单件商品总数 $scope.sumFn = function(){ var sum = 0; angular.forEach($scope.goods,function(item){ sum += Number(item.sum); }); return sum; }; var getIndex = function(id){ var stateIndex = -1; angular.forEach($scope.goods, function(item, index){ if(id === item.id){ stateIndex = index; } }); return stateIndex; } //移除方法 $scope.remove = function(id){ var tmpGoodIndex = getIndex(id); if(tmpGoodIndex !== -1){ //将从索引位置为stateIndex删除一个值 $scope.goods.splice(tmpGoodIndex, 1); } }; //清空购物车方法 $scope.clear = function(){ $scope.goods=[]; } //增加商品数量 $scope.addNumber = function(id){ var tmpGoodIndex = getIndex(id); if(tmpGoodIndex !== -1){ ++$scope.goods[tmpGoodIndex].sum; } }; //减少商品数量 $scope.subNumber = function(id){ var tmpGoodIndex = getIndex(id); if(tmpGoodIndex !== -1){ --$scope.goods[tmpGoodIndex].sum; } }; $scope.$watch('goods', function(newVal, oldVal){ angular.forEach(newVal,function(item, index){ //监听商品信息如果为非法字符那么回归原来的商品数量 if(isNaN(item.sum) || item.sum < 0){ item.sum = oldVal[index].sum; } }); },true); //列表排序 /* * $scope.order = '-';这个'-'代表倒序 * */ $scope.order = '-'; $scope.orderType = 'id'; $scope.orderGoods = function(type){ if($scope.order === '-'){ $scope.order = ''; } else { $scope.order = '-'; } $scope.orderType = type; }; }); </script> </html>