<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>