<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--
http://www.51xuediannao.com/html+css/htmlcssjq/css3_media.html-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8">
<title></title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
select{
width: 100%;
}
ul{
list-style: none;
padding-left: 3px;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<select name="" ng-model="orderkey" >
<option value="">按要求排序</option>
<option value="-m_time">按时间正序</option>
<option value="m_price">按价格正序</option>
</select>
<br />
<select name="" ng-model="serachkey1">
<option value="">按状态查询</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>
<br />
<input type="text" id="" value="" placeholder="按名称查询" ng-model="serachkey" style="width: 100%;"/>
<div ng-show="isclear" style="width: 100%; height: 200px;text-align: center;line-height: 200px;">数据已经清空!</div>
<table border="0" cellspacing="0" cellpadding="5">
<tr ng-repeat="x in datas|orderBy:orderkey|filter:{m_zhuangtai:serachkey1,m_name:serachkey}">
<td><input type="checkbox" name="" id="" value="" /></td>
<td><img src="{{x.picUrl}}" /></td>
<td>
<ul>
<li>{{x.m_name+"-"+x.m_zhuangtai}}</li>
<li>{{x.m_price|currency:"¥:"}}</li>
<li>
<input type="button" id="" value="-" ng-click="reduce(x.id)" />
<span>{{x.m_num}}</span>
<input type="button" id="" value="+" ng-click="x.m_num=x.m_num+1"/>
</li>
<li>
<span style="color: red;font-weight: bolder;">{{(x.m_price*x.m_num)|currency:"¥:"}}</span>
<input type="button" id="" value="删除" />
<input type="button" id="" value="修改" />
</li>
</ul>
</td>
</tr>
</table>
<p>
<input type="button" name="" id="" value="全选/返选" onclick="seleAll()" />
<input type="button" name="" id="" value="批量删除" ng-click="delMore()" />
<input type="button" name="" id="" value="新增记录" ng-click="isAdd=!isAdd"/>
<input type="button" name="" id="" value="清空记录" ng-click="clearRecords()" />
</p>
<span style="color: green;">合计:{{getTotal()|currency:"¥:"}}</span>
<span style="color: green;">数量合计:{{getNumTotal()}}</span>
<ul style="list-style: none;" ng-show="isAdd">
<li><input type="text" id="" value="" placeholder="请输入名称" ng-model="a_name"/>
<div style="color: red;" ng-show="isname">*名称不能为空</div>
</li>
<li><input type="text" id="" value="" placeholder="请输入价格" ng-model="a_price"/>
<div style="color: red;" ng-show="isprice">*价格大于0</div>
</li>
<li>产地:</li>
<li>
<select ng-model="province" ng-options="a.province for a in addr" ng-change="changePro()"></select>
<select ng-model="city" ng-options="b.city for b in province.citys"></select>
</li>
<li><input type="button" id="" value="保存" ng-click="save()" /></li>
</ul>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope,$http){
//获取数据
$http.get("data.json").then(function(response){
$scope.datas=response.data;
})
$scope.reduce=function(mid){
for (var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].id==mid){
var n=$scope.datas[i].m_num;
if(n>1){
$scope.datas[i].m_num--;
}
}
}
}
$scope.clearRecords=function(){
$scope.datas=[];
$scope.isclear=true;
}
})
</script>
</body>
</html>