<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>周考3</title>
<!--引入js包-->
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
var app = angular.module('mApp', []);
app.controller('mCtrl', function($scope, $http) {
/*
* 请求数据
*/
$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest")
.then(function(response) {
$scope.goods = response.data;
})
/*模糊查询关键字*/
$scope.c_name = "";
/*按条件排序关键字*/
$scope.orderKey = "";
/*点菜加*/
$scope.jia = function(m_index) {
var num = $scope.goods[m_index].number;
num++;
$scope.goods[m_index].number = num;
};
/*点菜减*/
$scope.jian = function(m_index) {
var num = $scope.goods[m_index].number;
num--;
if(num <= 0) {
$scope.goods[m_index].number = 0;
//提示
alert("不能再进行减操作了");
} else {
$scope.goods[m_index].number = num;
}
};
/*下单撤销数量*/
var temp = 0;
/*下单*/
$scope.xiadan = function(m_index) {
var xia = confirm("是否确定下单?");
if(xia) {
var m_sells = $scope.goods[m_index].sells;
temp = $scope.goods[m_index].number;
m_sells = m_sells + $scope.goods[m_index].number;
$scope.goods[m_index].sells = m_sells;
$scope.totil_price = $scope.goods[m_index].number * $scope.goods[m_index].price;
} else {
}
};
/*下单撤销*/
$scope.chexiao = function(m_index) {
$scope.goods[m_index].sells = $scope.goods[m_index].sells - temp;
temp = 0;
$scope.totil_price = 0;
}
/*全选反选*/
$scope.checkAll = function() {
var cks = $("table input[type = 'checkbox']");
for(var i = 0; i < cks.length; i++) {
if(!i == 0) {
if(cks[i].checked) {
cks[i].checked = false;
} else {
cks[i].checked = true;
}
}
}
};
/*批量删除*/
$scope.removeAll = function() {
var shan = confirm("是否删除选择商品?");
if(shan) {
var cks = $("table input[type = 'checkbox']");
for(var i = cks.length - 1; i >= 0; i--) {
if(cks[i].checked) {
//var m_index = cks[i].value;
$scope.goods.splice(parseInt(cks[i].value), 1);
} else {
}
}
} else {
alert("删除失败");
}
};
/*总消费*/
$scope.totil_price = 0;
});
</script>
</head>
<body ng-app="mApp" ng-controller="mCtrl">
<input type="text" placeholder="按菜单名称模糊查询" ng-model="c_name" />
<select ng-model="orderKey">
<option value="">--按需求排序--</option>
<option value="price">--按价格正序--</option>
<option value="-price">--按价格倒序--</option>
<option value="sells">--按销量正序--</option>
<option value="-sells">--按销量倒序--</option>
</select>
<input type="button" value="批量删除" ng-click="removeAll()" />
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>
<input type="checkbox" ng-click="checkAll()" />
</td>
<td>菜单</td>
<td>菜系</td>
<td>售价</td>
<td>月销量</td>
<td>点菜操作</td>
<td>菜单操作</td>
<td>小计</td>
</tr>
<tr ng-repeat="g in goods|filter:c_name|orderBy:orderKey">
<td>
<input type="checkbox" value="$index" />
</td>
<td>{{g.name}}</td>
<td>{{g.type}}</td>
<td>{{g.price|currency:'¥':'0'}}</td>
<td>{{g.sells}}</td>
<td>
<input type="button" value="-" ng-click="jian($index)" />
<input type="text" value="{{g.number}}" />
<input type="button" value="+" ng-click="jia($index)" />
</td>
<td>
<input type="button" value="下单" ng-click="xiadan($index)" />
<input type="button" value="撤销" ng-click="chexiao($index)" />
</td>
<td>{{g.price*g.number|currency:'¥':'0'}}</td>
</tr>
<tr>
<td colspan="8" align="right">
总消费:{{totil_price|currency:'¥':'0'}}
</td>
</tr>
</table>
<br />{{goods}}
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title>周考3</title>
<!--引入js包-->
<script src="js/angular.min.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
var app = angular.module('mApp', []);
app.controller('mCtrl', function($scope, $http) {
/*
* 请求数据
*/
$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest")
.then(function(response) {
$scope.goods = response.data;
})
/*模糊查询关键字*/
$scope.c_name = "";
/*按条件排序关键字*/
$scope.orderKey = "";
/*点菜加*/
$scope.jia = function(m_index) {
var num = $scope.goods[m_index].number;
num++;
$scope.goods[m_index].number = num;
};
/*点菜减*/
$scope.jian = function(m_index) {
var num = $scope.goods[m_index].number;
num--;
if(num <= 0) {
$scope.goods[m_index].number = 0;
//提示
alert("不能再进行减操作了");
} else {
$scope.goods[m_index].number = num;
}
};
/*下单撤销数量*/
var temp = 0;
/*下单*/
$scope.xiadan = function(m_index) {
var xia = confirm("是否确定下单?");
if(xia) {
var m_sells = $scope.goods[m_index].sells;
temp = $scope.goods[m_index].number;
m_sells = m_sells + $scope.goods[m_index].number;
$scope.goods[m_index].sells = m_sells;
$scope.totil_price = $scope.goods[m_index].number * $scope.goods[m_index].price;
} else {
}
};
/*下单撤销*/
$scope.chexiao = function(m_index) {
$scope.goods[m_index].sells = $scope.goods[m_index].sells - temp;
temp = 0;
$scope.totil_price = 0;
}
/*全选反选*/
$scope.checkAll = function() {
var cks = $("table input[type = 'checkbox']");
for(var i = 0; i < cks.length; i++) {
if(!i == 0) {
if(cks[i].checked) {
cks[i].checked = false;
} else {
cks[i].checked = true;
}
}
}
};
/*批量删除*/
$scope.removeAll = function() {
var shan = confirm("是否删除选择商品?");
if(shan) {
var cks = $("table input[type = 'checkbox']");
for(var i = cks.length - 1; i >= 0; i--) {
if(cks[i].checked) {
//var m_index = cks[i].value;
$scope.goods.splice(parseInt(cks[i].value), 1);
} else {
}
}
} else {
alert("删除失败");
}
};
/*总消费*/
$scope.totil_price = 0;
});
</script>
</head>
<body ng-app="mApp" ng-controller="mCtrl">
<input type="text" placeholder="按菜单名称模糊查询" ng-model="c_name" />
<select ng-model="orderKey">
<option value="">--按需求排序--</option>
<option value="price">--按价格正序--</option>
<option value="-price">--按价格倒序--</option>
<option value="sells">--按销量正序--</option>
<option value="-sells">--按销量倒序--</option>
</select>
<input type="button" value="批量删除" ng-click="removeAll()" />
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>
<input type="checkbox" ng-click="checkAll()" />
</td>
<td>菜单</td>
<td>菜系</td>
<td>售价</td>
<td>月销量</td>
<td>点菜操作</td>
<td>菜单操作</td>
<td>小计</td>
</tr>
<tr ng-repeat="g in goods|filter:c_name|orderBy:orderKey">
<td>
<input type="checkbox" value="$index" />
</td>
<td>{{g.name}}</td>
<td>{{g.type}}</td>
<td>{{g.price|currency:'¥':'0'}}</td>
<td>{{g.sells}}</td>
<td>
<input type="button" value="-" ng-click="jian($index)" />
<input type="text" value="{{g.number}}" />
<input type="button" value="+" ng-click="jia($index)" />
</td>
<td>
<input type="button" value="下单" ng-click="xiadan($index)" />
<input type="button" value="撤销" ng-click="chexiao($index)" />
</td>
<td>{{g.price*g.number|currency:'¥':'0'}}</td>
</tr>
<tr>
<td colspan="8" align="right">
总消费:{{totil_price|currency:'¥':'0'}}
</td>
</tr>
</table>
<br />{{goods}}
</body>
</html>