购物车(按价格ID排序,且可以查询,)_vue购物车中实现一个按钮操作价格正序倒序-CSDN博客

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//初始化一个id值---全局变量
var i = 2000;
var app = angular.module("myapp", []).controller("myctrl", function($scope, $http) {
//1.获取展示的订单数据
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").then(function(success) {
$scope.goods = success.data;
//alert($scope.goods.length);
})
//2.获取二级联动的数据
$http.get("addr.json").then(function(success) {
$scope.addr = success.data;
//alert($scope.addr.length);
})
//3.声明状态值,,,记录添加表单的显示和隐藏
$scope.flag_add = false;
//改变省份,,,切换里面的城市
$scope.changeProvince = function() {
$scope.select_city = $scope.select_province.citys[0];
}
//4.添加数据---验证信息
$scope.save = function() {
i++;
//4.0清空提示信息
$(".t_span").html("");
//4.1获取到输入的值
var gname = $scope.gname;
var uname = $scope.uname;
var tel = $scope.tel;
var price = $scope.price;
var province = $scope.select_province.province;
var city = $scope.select_city.city;
//alert(city);
//4.2进行验证
if(gname == null || gname == "") {
$("#gname_span").html("商品名不能为空");
return;
}
if(uname == null || uname == "") {
$("#uname_span").html("用户名不能为空");
return;
}
if(tel == null || tel == "") {
$("#tel_span").html("手机号不能为空");
return;
}
if(price == null || price == "") {
$("#price_span").html("价格不能为空");
return;
}
//4.3添加数据
$scope.goods.push({
id: i,
gname: gname,
uname: uname,
tel: tel,
price: price,
city: city,
regdate: new Date(),
state: "已发货"
})
//4.4隐藏表单
$scope.flag_add = false;
}
//5.全选,全不选
$scope.changeChecked = function() {
for(var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].check = $scope.ischeck
}
}
//6.批量删除
$scope.delAll = function() {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].check && $scope.goods[i].state == "已发货") {
$scope.goods.splice(i, 1);
i--;
}else{
//如果有未发货被选中,,,点击删除以后,状态值改变成false
$scope.goods[i].check=false;
$scope.ischeck = false;
}
}
}
})
</script>
</head>

<body ng-app="myapp" ng-controller="myctrl">
<button ng-click="flag_add=true">新增订单</button>
<button ng-click="delAll()">批量删除</button>
<input type="text" ng-model="select_name" placeholder="按名称查询" />
<input type="text" ng-model="select_tel" placeholder="按手机号查询" />
<select ng-model="state">
<option value="">---按状态查询---</option>
<option value="已">---已发货---</option>
<option value="未">---未发货---</option>
</select>
<table border="1px" cellspacing="0" cellpadding="0" width="800px">
<tr>
<td><input type="checkbox" ng-change="changeChecked()" ng-model="ischeck" /></td>
<td>id<button ng-click="px='id';aa=!aa">排序</button></td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="px='price';aa=!aa">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="px='regdate';aa=!aa">排序</button></td>
<td>状态</td>
</tr>
<tr ng-repeat="g in goods|filter:{'gname':select_name,'tel':select_tel,'state':state}|orderBy:px:aa">
<td><input type="checkbox" ng-model="g.check" /></td>
<td>{{g.id}}</td>
<td>{{g.gname}}</td>
<td>{{g.uname}}</td>
<td>{{g.tel}}</td>
<td>{{g.price|currency:"¥"}}</td>
<td>{{g.city}}</td>
<td>{{g.regdate|date:"MM-dd hh:mm:ss"}}</td>
<td>
<span ng-show="g.state=='已发货'" style="background-color: green;">{{g.state}}</span>
<button ng-show="g.state=='未发货'" ng-click="g.state='已发货'" style="background-color: yellow;">{{g.state}}</button>
</td>
</tr>
</table>
<form ng-show="flag_add">
<fieldset id="">
<legend>订单信息</legend>
商品名:<input type="text" ng-model="gname" /><span id="gname_span" class="t_span"></span><br /> 用户名:
<input type="text" ng-model="uname" /><span id="uname_span" class="t_span"></span><br /> 手机号:
<input type="text" ng-model="tel" /><span id="tel_span" class="t_span"></span><br /> 价格:
<input type="text" ng-model="price" /><span id="price_span" class="t_span"></span><br /> 城市:
<select ng-model="select_province" ng-init="select_province=addr[0]" ng-options="item.province for item in addr" ng-change="changeProvince()"></select>
<select ng-model="select_city" ng-init="select_city=select_province.citys[0]" ng-options="item2.city for item2 in select_province.citys"></select><br />
<button ng-click="save()">保存</button>
</fieldset>
</form>

</body>

</html>