AngularJS消費 小計
阿新 • • 發佈:2018-11-27
<div> <input type="text" name="" id="" value="" placeholder="根據選單名稱模糊查詢..." ng-model="searKey" /> <input type="text" name="" id="" value="" placeholder="根據價格模糊查詢..." ng-model="searprice" /> <select name="" ng-model="orderkey"> <option value="">--按要求排序--</option> <option value="sells">銷量正序</option> <option value="-sells">銷量倒序</option> <option value="price">價格正序</option> <option value="-price">價格倒序</option> </select> <input type="button" id="" value="批量刪除" ng-click="delMore()" /> <input type="button" id="" value="清空資料" ng-click="clearmenu()" /> </div> <table border="1" cellspacing="0" cellpadding="1"> <tr><th><input type="checkbox" id="" value="" ng-model="all" /></th> <th>選單</th> <th>菜系</th> <th>售價</th> <th>月銷量</th> <th>點菜操作</th> <th>選單操作</th> <th>小計</th> </tr> <tr ng-repeat="x in menus|filter:{name:searKey,price:searprice}|orderBy:orderkey"> <td><input type="checkbox" id="" value="{{x.id}}" ng-model="all" /></td> <td>{{x.name}}</td> <td>{{x.type[0]+","+x.type[1]}}</td> <td>{{x.price}}</td> <td>{{x.sells}}</td> <td> <input type="button" id="" value="-" ng-click="reduce(x.id)"/> <!--<input type="button" id="" value="-" ng-click="x.number++"/>--> {{x.number}} <input type="button" id="" value="+" ng-click="increase(x.id)"/> </td> <td> <!--<input type="button" id="" value="下單" ng-click="ordermenu(x.id)"/>--> <input type="button" id="" value="下單" ng-click="x.sells=x.sells+x.number"/> <input type="button" id="" value="撤銷" ng-click="revmenu(x.id)"/> </td> <td>{{x.price*x.number}}</td> </tr> </table> <div> <p>總消費:{{getTotal()}}</p> </div> <script type="text/javascript"> var app=angular.module("myapp",[]); app.controller("myctrl",function($scope,$http){ //從網路上獲取資料 $http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest") .then(function(response){
// console.log(response);
$scope.menus=response.data;
});
$scope.clearmenu=function(){ $scope.menus=[]; } //下單操作 $scope.ordermenu=function(id){ for (var i = 0; i < $scope.menus.length; i++) { if($scope.menus[i].id==id){ //銷量增加 $scope.menus[i].sells+=$scope.menus[i].number; break; } } } //撤銷操作 $scope.revmenu=function(id){ if(confirm("確定撤銷嗎?")){ for (var i = 0; i < $scope.menus.length; i++) { if($scope.menus[i].id==id){ //銷量減少 $scope.menus[i].sells-=$scope.menus[i].number; //清空數量 $scope.menus[i].number=0; break; } } } } //數量加加 根據id去查詢數量,然後再改變它的number值 $scope.increase=function(id){ for (var i = 0; i < $scope.menus.length; i++) { if($scope.menus[i].id==id){ $scope.menus[i].number++; break; } } } //數量的相 $scope.reduce=function(id){ for (var i = 0; i < $scope.menus.length; i++) { if($scope.menus[i].id==id){ if($scope.menus[i].number==0){ alert("不能再減少了。"); }else{ $scope.menus[i].number--; } break; } } } $scope.getTotal=function(){ var total=0; for (var i = 0; i < $scope.menus.length; i++) { total+=($scope.menus[i].price*$scope.menus[i].number); } return total; } $scope.delMore=function(){ //得到選中的checkbox var cbs=$("input:checked"); if(cbs.length==0){ alert("請選擇。"); }else{ var result=confirm("確定刪除嗎?"); if(result){ cbs.each(function(){ for (var i = 0; i < $scope.menus.length; i++) { if($(this).val()==$scope.menus[i].id){ $scope.menus.splice(i,1);//刪除 break; } } }); alert("刪除成功"); }else{ alert("刪除失敗"); } } } }); </script> </body>