<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ssp {
color: red;
}
</style>
<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">
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.provinces = success.data; //省份
$scope.selectProvince = $scope.provinces[0];
$scope.selectCity = $scope.selectProvince.citys[0];
})
//3.改变省份,,,切换市
$scope.changePro = function() {
$scope.selectCity = $scope.selectProvince.citys[0];
}
//4.声明默认的显示隐藏状态
$scope.flag = false;
//5.点击保存信息
$scope.save = function() {
//清空提示信息
$(".ssp").html("");
//获取输入的内容
var gname = $scope.gname;
var uname = $scope.uname;
var tel = $scope.tel;
var price = $scope.price;
var pro = $scope.selectProvince.province;
var cit = $scope.selectCity.city;
if(gname == undefined || gname == "") {
$("#gname_span").html("*商品名称不能为空");
return;
}
if(uname == undefined || uname == "") {
$("#uname_span").html("*用户名称不能为空");
return;
}
if(tel == undefined || tel == "") {
$("#tel_span").html("*手机号不能为空");
return;
}
if(price == undefined || price == "") {
$("#price_span").html("*价格不能为空");
return;
}
//添加到数组
$scope.goods.push({
id: 3380,
gname: gname,
uname: uname,
tel: tel,
price: price,
provice: pro,
city: cit,
regdate: new Date(),
state: "未发货"
})
//隐藏
$scope.flag = false;
}
//批量删除
$scope.delAll = function() {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.ischecked) {
if($scope.goods[i].state == "已发货") {
$scope.goods.splice(i, 1);
i--;
} else {
$scope.ischecked = false;
}
}
}
}
$scope.update = function(index) {
$scope.xs = true;
idx = index
$scope.gname1 = $scope.goods[index].gname;
$scope.uname1 = $scope.goods[index].uname;
$scope.tel1 = $scope.goods[index].tel;
$scope.price1 = $scope.goods[index].price;
}
$scope.xg1 = function() {
$scope.goods[idx].gname = $scope.gname1;
$scope.goods[idx].uname = $scope.uname1;
$scope.goods[idx].tel = $scope.tel1;
$scope.goods[idx].price = $scope.price1;
$scope.xs = false;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<button ng-click="flag=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="select_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-model="ischecked" /></td>
<td>id<button ng-click="px='id';sj=!sj">排序</button></td>
<td>商品名称</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="px='price';sj=!sj">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="px='regdate';sj=!sj">排序</button></td>
<td>状态</td>
</tr>
<tr ng-repeat="s in goods|filter:{gname:select_Name,tel:select_Tel,state:select_state}|orderBy:px:sj">
<td><input type="checkbox" ng-model="ischecked" /></td>
<td>{{s.id}}</td>
<td>{{s.gname}}</td>
<td>{{s.uname}}</td>
<td>{{s.tel}}</td>
<td>{{s.price|currency:"¥"}}</td>
<td>{{s.provice}}</td>
<td>{{s.regdate|date:"MM-dd hh:mm:ss"}}</td>
<td>
<span ng-show="s.state=='已发货'" style="background-color: green;">{{s.state}}</span>
<button ng-show="s.state=='未发货'" ng-click="s.state='已发货'" style="background-color: yellow;">{{s.state}}</button>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<form ng-show="flag">
商品名称:<input type="text" ng-model="gname" /><span id="gname_span" class="ssp"></span><br /> 用户名:
<input type="text" ng-model="uname" /><span id="uname_span" class="ssp"></span><br /> 手机号:
<input type="text" ng-model="tel" /><span id="tel_span" class="ssp"></span><br /> 价格:
<input type="text" ng-model="price" /><span id="price_span" class="ssp"></span><br /> 城市:
<select ng-model="selectProvince" ng-options="pItem.province for pItem in provinces" ng-change="changePro()"></select>
<select ng-model="selectCity" ng-options="cItem.city for cItem in selectProvince.citys"></select>
<br/><button ng-click="save()">保存</button>
</form>
<form ng-show="xs">
商品名称:<input type="text" ng-model="gname1" /><br /> 用户名:
<input type="text" ng-model="uname1" /><br /> 手机号:
<input type="text" ng-model="tel1" /> 价格:
<input type="text" ng-model="price1" />
<br/><button ng-click="xg1()">提交</button>
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ssp {
color: red;
}
</style>
<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">
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.provinces = success.data; //省份
$scope.selectProvince = $scope.provinces[0];
$scope.selectCity = $scope.selectProvince.citys[0];
})
//3.改变省份,,,切换市
$scope.changePro = function() {
$scope.selectCity = $scope.selectProvince.citys[0];
}
//4.声明默认的显示隐藏状态
$scope.flag = false;
//5.点击保存信息
$scope.save = function() {
//清空提示信息
$(".ssp").html("");
//获取输入的内容
var gname = $scope.gname;
var uname = $scope.uname;
var tel = $scope.tel;
var price = $scope.price;
var pro = $scope.selectProvince.province;
var cit = $scope.selectCity.city;
if(gname == undefined || gname == "") {
$("#gname_span").html("*商品名称不能为空");
return;
}
if(uname == undefined || uname == "") {
$("#uname_span").html("*用户名称不能为空");
return;
}
if(tel == undefined || tel == "") {
$("#tel_span").html("*手机号不能为空");
return;
}
if(price == undefined || price == "") {
$("#price_span").html("*价格不能为空");
return;
}
//添加到数组
$scope.goods.push({
id: 3380,
gname: gname,
uname: uname,
tel: tel,
price: price,
provice: pro,
city: cit,
regdate: new Date(),
state: "未发货"
})
//隐藏
$scope.flag = false;
}
//批量删除
$scope.delAll = function() {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.ischecked) {
if($scope.goods[i].state == "已发货") {
$scope.goods.splice(i, 1);
i--;
} else {
$scope.ischecked = false;
}
}
}
}
$scope.update = function(index) {
$scope.xs = true;
idx = index
$scope.gname1 = $scope.goods[index].gname;
$scope.uname1 = $scope.goods[index].uname;
$scope.tel1 = $scope.goods[index].tel;
$scope.price1 = $scope.goods[index].price;
}
$scope.xg1 = function() {
$scope.goods[idx].gname = $scope.gname1;
$scope.goods[idx].uname = $scope.uname1;
$scope.goods[idx].tel = $scope.tel1;
$scope.goods[idx].price = $scope.price1;
$scope.xs = false;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<button ng-click="flag=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="select_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-model="ischecked" /></td>
<td>id<button ng-click="px='id';sj=!sj">排序</button></td>
<td>商品名称</td>
<td>用户名</td>
<td>手机号</td>
<td>价格<button ng-click="px='price';sj=!sj">排序</button></td>
<td>城市</td>
<td>下单时间<button ng-click="px='regdate';sj=!sj">排序</button></td>
<td>状态</td>
</tr>
<tr ng-repeat="s in goods|filter:{gname:select_Name,tel:select_Tel,state:select_state}|orderBy:px:sj">
<td><input type="checkbox" ng-model="ischecked" /></td>
<td>{{s.id}}</td>
<td>{{s.gname}}</td>
<td>{{s.uname}}</td>
<td>{{s.tel}}</td>
<td>{{s.price|currency:"¥"}}</td>
<td>{{s.provice}}</td>
<td>{{s.regdate|date:"MM-dd hh:mm:ss"}}</td>
<td>
<span ng-show="s.state=='已发货'" style="background-color: green;">{{s.state}}</span>
<button ng-show="s.state=='未发货'" ng-click="s.state='已发货'" style="background-color: yellow;">{{s.state}}</button>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<form ng-show="flag">
商品名称:<input type="text" ng-model="gname" /><span id="gname_span" class="ssp"></span><br /> 用户名:
<input type="text" ng-model="uname" /><span id="uname_span" class="ssp"></span><br /> 手机号:
<input type="text" ng-model="tel" /><span id="tel_span" class="ssp"></span><br /> 价格:
<input type="text" ng-model="price" /><span id="price_span" class="ssp"></span><br /> 城市:
<select ng-model="selectProvince" ng-options="pItem.province for pItem in provinces" ng-change="changePro()"></select>
<select ng-model="selectCity" ng-options="cItem.city for cItem in selectProvince.citys"></select>
<br/><button ng-click="save()">保存</button>
</form>
<form ng-show="xs">
商品名称:<input type="text" ng-model="gname1" /><br /> 用户名:
<input type="text" ng-model="uname1" /><br /> 手机号:
<input type="text" ng-model="tel1" /> 价格:
<input type="text" ng-model="price1" />
<br/><button ng-click="xg1()">提交</button>
</form>
</body>
</html>