<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<style>
table tr:nth-child(2n+1){
background: red;
}
table tr:nth-child(2n){
background: yellowgreen;
}
a{
text-decoration: none;
}
</style>
<script>
var app=angular.module("xuexi",[]);
app.controller("ctrl",function($scope,$http){
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(a){
$scope.datas=a
})
//修改回显
$scope.up=function(gname){
for (var i=0;i<$scope.datas.length;i++) {
if($scope.datas[i].gname==gname){
$scope.update=$scope.datas[i]
break;
}
}
$scope.cc=true
}
//修改
$scope.update1=function(){
var name=$scope.gname
for (var i=0;i<$scope.update.length;i++) {
if($scope.update[i].name==gname){
$scope.update[i]=$scope.update
break
}
}
$scope.cc=false;
}
$scope.insert=function(){
$scope.ab=true;
}
$scope.add=function(){
var gname=$scope.gname
var uname=$scope.uname
var tel=$scope.tel
var price=$scope.price
var city=$scope.city
var regdate=$scope.regdate= new Date()
var state=$scope.state
$scope.datas.push({gname:$scope.gname,uname:$scope.uname,tel:$scope.tel,price:$scope.price,provice:$scope.pro,
city:$scope.city,regdate:regdate,state:$scope.state})
alert("保存成功");
$scope.ab=false
}
//获取全选全不选
$scope.qx=function(){
var s=$scope.ld
for (var i in $scope.datas) {
$scope.datas[i].ldd=s
}
}
//批量删除
$scope.del=function(){
for (var i=0;i<$scope.datas.length;i++) {
if($scope.datas[i].ldd){
$scope.datas.splice(i,1)
i--
}else{
alert("请选择你要删除的数据");
}
}
}
//查询
$scope.selt=function(){
$scope.test1=$scope.test
$scope.test2=$scope.xue
$scope.test3=$scope.tai
}
//删除
$scope.delete=function(ids){
$scope.datas.splice(ids,1);
}
//排序
})
</script>
</head>
<body ng-app="xuexi" ng-controller="ctrl">
<button ng-click="insert()">新增订单</button>
<button ng-click="del()">批量删除</button>
<input type="text" ng-model="test" placeholder="按商品名查询" />
<input type="tel" ng-model="xue" placeholder="按手机号查询" />
<select ng-model="tai" >
<option value="">按状态查询</option>
<option>已发货</option>
<option>未发货</option>
</select>
<button ng-click="selt()">搜索</button>
<form ng-show="ab">
商品名:<input ng-model="gname" /><br />
用户名:<input ng-model="uname" /><br />
手机号:<input ng-model="tel" /><br />
价格:<input ng-model="price" /><br />
省份:<select id="p1" ng-model="pro" οnchange="getcity()">
<option value="">请选择省份</option>
<option>北京</option>
<option >上海</option>
<option>河南</option>
</select><br />
城市:
<select id="city" ng-model="city">
<option value="">请选择城市</option>
</select><br />
状态:<input ng-model="state" /><br />
<button ng-click="add()">保存</button>
</form>
<table align="center" border="1px" >
<tr>
<th><input type="checkbox" ng-model="ld" ng-click="qx()" </th>
<th>id<button ng-click="px='id';sj=!sj">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button ng-click="px='price';sj=!sj">排序</button> </th>
<th>地址</th>
<th>下单时间</th>
<th>状态</th>
<th colspan="2" align="center">操作</th>
</tr>
<tr ng-repeat="a in datas|filter:{gname:test1,tel:xue,state:tai}|orderBy:px:js">
<th><input type="checkbox" ng-model="a.ldd" /> </th>
<th>{{a.id}}</th>
<th>{{a.gname}}</th>
<th>{{a.uname}}</th>
<th>{{a.tel}}</th>
<th>{{a.price}}</th>
<th>{{a.provice}}---{{a.city}}</th>
<th>{{a.regdate | date:'yyyy-MM-dd hh:mm:ss'}}</th>
<th>
<span style="background: gold;" ng-show="a.state=='已发货'">已发货</span>
<span style="background: palevioletred;" ng-show="a.state=='未发货'">
<a href="#" ng-click="a.state='已发货'">未发货</a>
</span>
</th>
<th><button ng-click="up(a.gname)" value="修改">修改</button></th>
<th><button ng-click="delete($index)">删除</button></th>
</tr>
</table>
<form ng-show="cc">
id:<input ng-model="update.id"/><br />
商品名:<input ng-model="update.gname" /><br />
用户名:<input ng-model="update.uname" /><br />
手机号:<input ng-model="update.tel" /><br />
价格:<input ng-model="update.price" /><br />
城市:<select ng-model="update.city">
<option value="">请选择</option>
<option>北京</option>
<option>上海</option>
<option>河南</option>
</select><br />
下单时间:<input ng-model="update.regdate" /><br />
状态:<input ng-model="update.state" /><br />
<button ng-click="update1()">修改</button>
</form>
</body>
<script>
var citys=[{pro:"北京",cs:["海淀","昌平","房山"]},
{pro:"上海",cs:["虹桥","浦东","浦西"]},
{pro:"河南",cs:["郑州","开封","洛阳"]}];
var cts=[];
function getcity(){
var p=$("#p1").val();
for (var i=0;i<citys.length;i++) {
if(p==citys[i].pro){
cts=citys[i].cs;
}
}
$("#city option").remove();
for (var i=0;i<cts.length;i++) {
var op=$("<option>"+cts[i]+"</option>")
$("#city").append(op)
}
}
</script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.8.2.min.js"></script>
<style>
table tr:nth-child(2n+1){
background: red;
}
table tr:nth-child(2n){
background: yellowgreen;
}
a{
text-decoration: none;
}
</style>
<script>
var app=angular.module("xuexi",[]);
app.controller("ctrl",function($scope,$http){
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(a){
$scope.datas=a
})
//修改回显
$scope.up=function(gname){
for (var i=0;i<$scope.datas.length;i++) {
if($scope.datas[i].gname==gname){
$scope.update=$scope.datas[i]
break;
}
}
$scope.cc=true
}
//修改
$scope.update1=function(){
var name=$scope.gname
for (var i=0;i<$scope.update.length;i++) {
if($scope.update[i].name==gname){
$scope.update[i]=$scope.update
break
}
}
$scope.cc=false;
}
$scope.insert=function(){
$scope.ab=true;
}
$scope.add=function(){
var gname=$scope.gname
var uname=$scope.uname
var tel=$scope.tel
var price=$scope.price
var city=$scope.city
var regdate=$scope.regdate= new Date()
var state=$scope.state
$scope.datas.push({gname:$scope.gname,uname:$scope.uname,tel:$scope.tel,price:$scope.price,provice:$scope.pro,
city:$scope.city,regdate:regdate,state:$scope.state})
alert("保存成功");
$scope.ab=false
}
//获取全选全不选
$scope.qx=function(){
var s=$scope.ld
for (var i in $scope.datas) {
$scope.datas[i].ldd=s
}
}
//批量删除
$scope.del=function(){
for (var i=0;i<$scope.datas.length;i++) {
if($scope.datas[i].ldd){
$scope.datas.splice(i,1)
i--
}else{
alert("请选择你要删除的数据");
}
}
}
//查询
$scope.selt=function(){
$scope.test1=$scope.test
$scope.test2=$scope.xue
$scope.test3=$scope.tai
}
//删除
$scope.delete=function(ids){
$scope.datas.splice(ids,1);
}
//排序
})
</script>
</head>
<body ng-app="xuexi" ng-controller="ctrl">
<button ng-click="insert()">新增订单</button>
<button ng-click="del()">批量删除</button>
<input type="text" ng-model="test" placeholder="按商品名查询" />
<input type="tel" ng-model="xue" placeholder="按手机号查询" />
<select ng-model="tai" >
<option value="">按状态查询</option>
<option>已发货</option>
<option>未发货</option>
</select>
<button ng-click="selt()">搜索</button>
<form ng-show="ab">
商品名:<input ng-model="gname" /><br />
用户名:<input ng-model="uname" /><br />
手机号:<input ng-model="tel" /><br />
价格:<input ng-model="price" /><br />
省份:<select id="p1" ng-model="pro" οnchange="getcity()">
<option value="">请选择省份</option>
<option>北京</option>
<option >上海</option>
<option>河南</option>
</select><br />
城市:
<select id="city" ng-model="city">
<option value="">请选择城市</option>
</select><br />
状态:<input ng-model="state" /><br />
<button ng-click="add()">保存</button>
</form>
<table align="center" border="1px" >
<tr>
<th><input type="checkbox" ng-model="ld" ng-click="qx()" </th>
<th>id<button ng-click="px='id';sj=!sj">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格<button ng-click="px='price';sj=!sj">排序</button> </th>
<th>地址</th>
<th>下单时间</th>
<th>状态</th>
<th colspan="2" align="center">操作</th>
</tr>
<tr ng-repeat="a in datas|filter:{gname:test1,tel:xue,state:tai}|orderBy:px:js">
<th><input type="checkbox" ng-model="a.ldd" /> </th>
<th>{{a.id}}</th>
<th>{{a.gname}}</th>
<th>{{a.uname}}</th>
<th>{{a.tel}}</th>
<th>{{a.price}}</th>
<th>{{a.provice}}---{{a.city}}</th>
<th>{{a.regdate | date:'yyyy-MM-dd hh:mm:ss'}}</th>
<th>
<span style="background: gold;" ng-show="a.state=='已发货'">已发货</span>
<span style="background: palevioletred;" ng-show="a.state=='未发货'">
<a href="#" ng-click="a.state='已发货'">未发货</a>
</span>
</th>
<th><button ng-click="up(a.gname)" value="修改">修改</button></th>
<th><button ng-click="delete($index)">删除</button></th>
</tr>
</table>
<form ng-show="cc">
id:<input ng-model="update.id"/><br />
商品名:<input ng-model="update.gname" /><br />
用户名:<input ng-model="update.uname" /><br />
手机号:<input ng-model="update.tel" /><br />
价格:<input ng-model="update.price" /><br />
城市:<select ng-model="update.city">
<option value="">请选择</option>
<option>北京</option>
<option>上海</option>
<option>河南</option>
</select><br />
下单时间:<input ng-model="update.regdate" /><br />
状态:<input ng-model="update.state" /><br />
<button ng-click="update1()">修改</button>
</form>
</body>
<script>
var citys=[{pro:"北京",cs:["海淀","昌平","房山"]},
{pro:"上海",cs:["虹桥","浦东","浦西"]},
{pro:"河南",cs:["郑州","开封","洛阳"]}];
var cts=[];
function getcity(){
var p=$("#p1").val();
for (var i=0;i<citys.length;i++) {
if(p==citys[i].pro){
cts=citys[i].cs;
}
}
$("#city option").remove();
for (var i=0;i<cts.length;i++) {
var op=$("<option>"+cts[i]+"</option>")
$("#city").append(op)
}
}
</script>
</html>