混合开发（2）
<!DOCTYPE html>
<html ng-app="App"> <head> <meta charset="utf-8" /> <title></title> <script src="js/angular.min.js"></script> <script src="js/jquery-3.1.0.min.js"></script> <script type="text/javascript"> var Ddata=[ { gid:001, gname:"手机", gnum:3, gprice:1000, gcount:3000 }, { gid:002, gname:"电脑", gnum:3, gprice:2000, gcount:6000 }, { gid:003, gname:"电视", gnum:6, gprice:5000, gcount:3000 } ]; </script> <script type="text/javascript"> var app=angular.module("App",[]); app.controller("Ctrl",function($scope){ $scope.data = Ddata; $scope.del=function($index){ $scope.data.splice($index,1); } $scope.orderkey="gid"; $scope.counts=function(){ var a=0; for (var i=0; i<$scope.data.length; i++) { a+=$scope.data[i].gnum; } return a; } $scope.prices=function(){ var a=0; for (var i=0; i<$scope.data.length; i++) { a+=$scope.data[i].gnum*$scope.data[i].gprice; } return a; } $scope.Alldel=function(){ for (var i=$scope.data.length; i>=0; i--) { $scope.data.splice(i,1); } } $scope.chan=function($index){ if($scope.data[$index].gnum<=0){ var f=confirm("确定要删除该产品吗?"); if(f){ $scope.data.splice($index,1); } } } }) </script> <style> .css1{ background: blueviolet; } .css2{ background: sandybrown; } </style> </head> <body ng-controller="Ctrl"> <h1 style="text-align: center;"><span style="background: #31708F;">我的购物车详情</span></h1> <input type="text" style="background: yellow; margin-left: 700px;" placeholder="根据名称查询" ng-model="searchcommodity"/> <table border="2" cellpadding="1" style="margin-left: 420px;"> <tr style="background: #8C8C8C;"> <td> 商品编号 <input type="button" value="︿" ng-click="orderkey='gid'" /> </td> <td> 商品名称 </td> <td> 商品数量 </td> <td> 商品单价 </td> <td> 价格小计 <input type="button" value="﹀" ng-click="orderkey='gunm*gprice'" /> </td> <td> 操作 </td> </tr> <tr ng-repeat="user in data | filter:{gname:searchcommodity}" class="{{$even?'css1':'css2'}}"> <td> {{user.gid}} </td> <td> {{user.gname}} </td> <td> <input type="number" value="{{user.gnum}}" ng-model="user.gnum" ng-change="chan($index)"/> </td> <td> {{user.gprice}} </td> <td> {{user.gcount}} </td> <td> <input type="button" value="移除" ng-click="del($index)"/> </td> </tr> </table> <div style="margin-left: 430px;"> <span>商品总数:</span> <span>{{counts()}} </span> <span>商品总价:</span> <span>{{prices()}}</span> <button ng-click="Alldel()" style="margin-left: 100px; background: yellow;">清空购物车</button> </div> </body> </html>