通过http服务请求本地json文件

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.red{
background-color: mediumvioletred;
}
.green{
background-color: springgreen;
}
.btn{
background-color: yellow;
border-radius: 5px;

}
#title{
background-color: yellowgreen;
font-size: 36px;
}
.span{
background-color: forestgreen;
}
</style>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope,$http) {
$scope.Goods = "";
$http({
method:"get",
url:"json/Goods.json"
}).then(function success (response) {
$scope.Goods = response.data;
},function error (response) {
$scope.Goods = "请求失败";
});

/*赋初值*/
$scope.search = "";
$scope.orderCheck = "";

/*清空购物车*/
$scope.delAll = function () {
$scope.Goods = "";
}
/*商品总数*/
$scope.sum = function () {
var sum = 0;
for (x in $scope.Goods) {
sum += parseInt($scope.Goods[x].gnum);
}
return sum;
}
/*商品总价*/
$scope.sumPrice = function () {
var sumPrice = 0;
for (x in $scope.Goods) {
sumPrice += $scope.Goods[x].gprice * $scope.Goods[x].gnum;
}
return sumPrice;
}
/*添加*/
$scope.addShow = false;
$scope.gid = 4;
$scope.gname = "";
$scope.gnum = "";
$scope.gprice = "";
$scope.add = function () {
var good = {};
good.gid = $scope.gid++;
good.gname = $scope.gname;
good.gnum = $scope.gnum;
good.gprice = $scope.gprice;
$scope.Goods.push(good);
$scope.addShow = false;
}

/*移除*/
$scope.del = function (id) {
for (x in $scope.Goods) {
if ($scope.Goods[x].gid == id) {
$scope.Goods.splice(x,1);
}
}
}

/*修改*/
$scope.updateShow = false;
$scope.uname = "";
$scope.unum = "";
$scope.uprice = "";
$scope.uGood = {};
$scope.upt = function (id) {
$scope.updateShow = true;
for (x in $scope.Goods) {
if ($scope.Goods[x].gid == id) {
$scope.uGood = $scope.Goods[x];
}
}

$scope.uname = $scope.uGood.gname;
$scope.unum = $scope.uGood.gnum;
$scope.uprice = $scope.uGood.gprice;

$scope.update = function () {
$scope.uGood.gname = $scope.uname;
$scope.uGood.gnum = $scope.unum;
$scope.uGood.gprice = $scope.uprice;
$scope.updateShow = false;
}
}

/*全选*/
$scope.bigCheck = false;
$scope.checkAll = function () {
for (x in $scope.Goods) {
$scope.Goods[x].check = $scope.bigCheck;
}
}

/*批量删除*/
$scope.delMore = function () {
$scope.delGoods = [];
for (x in $scope.Goods) {
if ($scope.Goods[x].check) {
$scope.delGoods.push($scope.Goods[x]);
}
}

for (x1 in $scope.delGoods) {
for (x2 in $scope.Goods) {
if ($scope.delGoods[x1] == $scope.Goods[x2]) {
$scope.Goods.splice(x2,1);
}
}
}
}

/*减*/
$scope.jian = function (id) {
for (x in $scope.Goods) {
if ($scope.Goods[x].gid == id) {
if ($scope.Goods[x].gnum == 1) {
if (confirm("您确认删除？")) {
$scope.del(id);
}
}else{
$scope.Goods[x].gnum--;
}


}
}
}

/*加*/
$scope.jia = function (id) {
for (x in $scope.Goods) {
if ($scope.Goods[x].gid == id) {
$scope.Goods[x].gnum++;
}
}
}

/*数量的加减*/
$scope.jiaJian = function (id) {
var nub = $("#"+id).val();
var num = parseInt(nub);

if (num < 1) {
if (confirm("您确认删除？")) {
$scope.del(id);
}else{
$("#"+id).val(1);
}
}else{
for (x in $scope.Goods) {
if ($scope.Goods[x].gid == id) {
$scope.uGood[x].gnum = num;
}
}
}
}

});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<span id="title">我的购物车详情</span><br /><br />
<input type="button" value="入库" class="btn" ng-click="addShow = !addShow"/>
<input type="button" value="批量删除" class="btn" ng-click="delMore()"/>
<select class="btn" ng-model="orderCheck">
<option value="">--请选择--</option>
<option value="gid">编号正序</option>
<option value="-gid">编号倒序</option>
<option value="gname">名称正序</option>
<option value="-gname">名称倒序</option>
<option value="gnum">数量正序</option>
<option value="-gnum">数量倒序</option>
<option value="gprice">单价正序</option>
<option value="-gprice">单价倒序</option>
<option value="gnum * gprice">小计正序</option>
<option value="-(gnum * gprice)">小计倒序</option>
</select>
<input type="text" placeholder="根据名称查询" class="btn" ng-model="search"/><br /><br />
<div ng-show="addShow">
商品名称：<input type="text" placeholder="请输入商品名称" ng-model="gname"/><br />
商品数量：<input type="text" placeholder="请输入商品数量" ng-model="gnum"/><br />
商品单价：<input type="text" placeholder="请输入商品单价" ng-model="gprice"/><br />
<input type="button" value="添加" class="btn" ng-click="add()"/>
</div><br />
<table border="1px" cellspacing="0" cellpadding="0" style="width: 500px;">
<tr style="background-color: grey;">
<th>
<input type="checkbox" ng-model="bigCheck" ng-click="checkAll()" />
</th>
<th>商品编号</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价</th>
<th>价格小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in Goods | filter:{gname:search} | orderBy:orderCheck" class="{{$index%2?'red':'green'}}">
<td>
<input type="checkbox" ng-model="x.check" />
</td>
<td>{{x.gid}}</td>
<td>{{x.gname}}</td>
<td>
<input type="number" ng-model="x.gnum" style="width: 70px;" ng-click="jiaJian(x.gid)" id="{{x.gid}}"/>
</td>
<td>{{x.gprice}}</td>
<td>{{x.gnum * x.gprice}}</td>
<td>
<input type="button" value="移除" class="btn" ng-click="del(x.gid)"/>
<input type="button" value="修改" class="btn" ng-click="upt(x.gid)"/>
</td>
</tr>
</table><br />
<div ng-show="updateShow">
商品名称：<input type="text" ng-model="uname"/><br />
商品数量：<input type="text" ng-model="unum"/><br />
商品单价：<input type="text" ng-model="uprice"/><br />
<input type="button" value="修改" class="btn" ng-click="update()"/>

</div><br />
<br />
<span class="span">商品总数：{{sum()}}     </span>
<span class="span">商品总价：{{sumPrice()}}     </span>
<input type="button" value="清空购物车" class="btn" ng-click="delAll()"/>
</center>

</body>

</html>

通过http服务请求本地json文件

通过http服务请求本地json文件

相关推荐