<!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. Get display data
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").then(function(success) {
$scope.goods = success.data;
//alert($scope.goods.length );
})
//2. Get secondary linkage data
$http.get("addr.json").then(function(success) {
$scope.provinces = success.data; //province
$scope.selectProvince = $scope.provinces[0];
$scope.selectCity = $scope.selectProvince.citys[0];
})
//3. Change province,,, switch city
$scope.changePro = function() {
$scope.selectCity = $scope.selectProvince.citys[0];
}
//4. Declare the default show and hide state
$scope.flag = false;
//5. Click to save the information
$scope.save = function() {
/ /Clear the prompt
$(".ssp").html("");
//Get the input
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("*Product name cannot be empty");
return;
}
if(uname == undefined || uname == " ") {
$("#uname_span").html("*Username cannot be empty");
return;
}
if(tel == undefined || tel == "") {
$("#tel_span").html ("*Mobile phone number cannot be empty");
return;
}
if(price == undefined || price == "" ) {
$("#price_span").html("*price cannot be empty");
return;
}
//Add to array
$scope.goods.push({
id: 3380,
gname: gname,
uname: uname,
tel: tel,
price: price,
provice: pro,
city: cit,
regdate: new Date() ,
state: "Not Shipped"
})
//Hide
$scope.flag = false;
}
//Batch delete
$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">Add order</button>
<button ng-click="delAll()">Delete in bulk </button>
<input type="text" ng-model="select_Name" placeholder="Search by name" />
<input type="text" ng-model="select_Tel" placeholder="Search by phone number" / >
<select ng-model="select_state">
<option value="">---check by status---</option>
<option value="already">---shipped---< /option> option>
<option value="Not yet">---Not Shipped---</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">sort</button></td>
<td>product name</td>
<td>username</td>
<td>Mobile Number</td>
<td>Price<button ng-click="px='price';sj=!sj">Sort</button></td>
<td>City</td>
< td>Order time<button ng-click="px='regdate';sj=!sj">sort</button></td>
<td>status</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. Get display data
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest").then(function(success) {
$scope.goods = success.data;
//alert($scope.goods.length );
})
//2. Get secondary linkage data
$http.get("addr.json").then(function(success) {
$scope.provinces = success.data; //province
$scope.selectProvince = $scope.provinces[0];
$scope.selectCity = $scope.selectProvince.citys[0];
})
//3. Change province,,, switch city
$scope.changePro = function() {
$scope.selectCity = $scope.selectProvince.citys[0];
}
//4. Declare the default show and hide state
$scope.flag = false;
//5. Click to save the information
$scope.save = function() {
/ /Clear the prompt
$(".ssp").html("");
//Get the input
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("*Product name cannot be empty");
return;
}
if(uname == undefined || uname == " ") {
$("#uname_span").html("*Username cannot be empty");
return;
}
if(tel == undefined || tel == "") {
$("#tel_span").html ("*Mobile phone number cannot be empty");
return;
}
if(price == undefined || price == "" ) {
$("#price_span").html("*price cannot be empty");
return;
}
//Add to array
$scope.goods.push({
id: 3380,
gname: gname,
uname: uname,
tel: tel,
price: price,
provice: pro,
city: cit,
regdate: new Date() ,
state: "Not Shipped"
})
//Hide
$scope.flag = false;
}
//Batch delete
$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">Add order</button>
<button ng-click="delAll()">Delete in bulk </button>
<input type="text" ng-model="select_Name" placeholder="Search by name" />
<input type="text" ng-model="select_Tel" placeholder="Search by phone number" / >
<select ng-model="select_state">
<option value="">---check by status---</option>
<option value="already">---shipped---< /option> option>
<option value="Not yet">---Not Shipped---</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">sort</button></td>
<td>product name</td>
<td>username</td>
<td>Mobile Number</td>
<td>Price<button ng-click="px='price';sj=!sj">Sort</button></td>
<td>City</td>
< td>Order time<button ng-click="px='regdate';sj=!sj">sort</button></td>
<td>status</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>