<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tr:nth-of-type(odd){
background: darkcyan;
}
tr:nth-of-type(even){
background:tomato;
}
span{
color: red;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("ctrl",function($scope,$http){
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(datas){
$scope.datas = datas;
});
$scope.pd = false;
$scope.xg = false;
$scope.ck_all = function(){
for(var i = 0; i < $scope.datas.length;i++){
$scope.datas[i].c=$scope.flag;
}
};
$scope.del_all = function(){
for(var i = 0 ; i<$scope.datas.length;i++){
if($scope.datas[i].c){
$scope.datas.splice(i,1);
i--;
}
}
}
$scope.dele_a = function(id){
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].id==id){
$scope.datas.splice(i,1);
}
}
}
$scope.add = function(){
var id = $scope.add_id;
var gname = $scope.add_gname;
var uname = $scope.add_uname;
var tel = $scope.add_tel;
var price = $scope.add_price;
var city = $scope.add_price;
var regdate = $scope.add_regdate;
$scope.errors=null;
if(id==undefined||id==""){
if($scope.errors==null){
$scope.errors= {};
}
$scope.errors.id="编号不合法"
}
if(gname==undefined||gname==""){
if($scope.errors==null){
$scope.errors={};
}
$scope.errors.gname="用户名不合法"
}
if($scope.errors==null){
$scope.datas.push({
id:id,
gname:gname,
uname:uname,
tel:tel,
price:price,
city:city,
regdate:regdate,
state:'未发货'
});
$scope.pd=false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<center>
<input type = "text" placeholder="输入内容查找" ng-model="namecx" />
<select ng-model="statecx">
<option value="">--请选择--</option>
<option>未发货</option>
<option>已发货</option>
</select>
<button ng-click="del_all()">批量删除</button>
<button ng-click="pd=!pd">新增订单</button>
<table border="1px">
<tr>
<td><input type = "checkbox" ng-click="ck_all()" ng-model="flag"/></td>
<td>商品编号<button ng-click="namepx='id';f=!f">排序</button></td>
<td>商品名称</td>
<td>用户名</td>
<td>电话</td>
<td>价格<button ng-click="namepx='price';f=!f">排序</button></td>
<td>地址</td>
<td>日期</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in datas | filter:namecx | filter:{state:statecx}|orderBy:namepx:f">
<td><input type = "checkbox" ng-model="d.c"/></td>
<td>{{d.id}}</td>
<td>{{d.gname}}</td>
<td>{{d.uname}}</td>
<td>{{d.tel}}</td>
<td>
<span ng-show="!xg">{{d.price |currency:'¥:'}}</span>
<input type="number" ng-show="xg" ng-model="d.price" >
</td>
<td>{{d.city}}</td>
<td>{{d.regdate | date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td>
<span style="background: yellow;" ng-show="d.state=='未发货'">
<a href="#"ng-click="d.state='已发货'">未发货</a>
</span>
<span style="background: green;" ng-show="d.state=='已发货'">已发货</span>
</td>
<td>
<button style="background: yellow;" ng-click="xg=!xg">修改</button>
<button style="background: red;" ng-click="dele_a(d.id)">删除</button>
</td>
</tr>
</table>
<div ng-show="pd">
<table>
<tr>
<td>商品编号</td>
<td><input type="number" ng-model="add_id"/>
<span>{{errors.id}}</span>
</td>
</tr>
<tr>
<td>商品名称</td>
<td><input type="text" ng-model="add_gname"/>
<span>{{errors.gname}}</span>
</td>
</tr>
<tr>
<td>用户名称</td>
<td><input type="text" ng-model="add_uname"/></td>
</tr>
<tr>
<td>电话号码</td>
<td><input type="text" ng-model="add_tel"/></td>
</tr>
<tr>
<td>商品价格</td>
<td><input type="text" ng-model="add_price"/></td>
</tr>
<tr>
<td>发货地址</td>
<td><input type="text" ng-model="add_city"/></td>
</tr>
<tr>
<td>订单日期</td>
<td><input type="text" ng-model="add_regdate"/></td>
</tr>
</table>
<button style="background: green;" ng-click="add()">保存订单</button>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tr:nth-of-type(odd){
background: darkcyan;
}
tr:nth-of-type(even){
background:tomato;
}
span{
color: red;
}
</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("ctrl",function($scope,$http){
$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
.success(function(datas){
$scope.datas = datas;
});
$scope.pd = false;
$scope.xg = false;
$scope.ck_all = function(){
for(var i = 0; i < $scope.datas.length;i++){
$scope.datas[i].c=$scope.flag;
}
};
$scope.del_all = function(){
for(var i = 0 ; i<$scope.datas.length;i++){
if($scope.datas[i].c){
$scope.datas.splice(i,1);
i--;
}
}
}
$scope.dele_a = function(id){
for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].id==id){
$scope.datas.splice(i,1);
}
}
}
$scope.add = function(){
var id = $scope.add_id;
var gname = $scope.add_gname;
var uname = $scope.add_uname;
var tel = $scope.add_tel;
var price = $scope.add_price;
var city = $scope.add_price;
var regdate = $scope.add_regdate;
$scope.errors=null;
if(id==undefined||id==""){
if($scope.errors==null){
$scope.errors= {};
}
$scope.errors.id="编号不合法"
}
if(gname==undefined||gname==""){
if($scope.errors==null){
$scope.errors={};
}
$scope.errors.gname="用户名不合法"
}
if($scope.errors==null){
$scope.datas.push({
id:id,
gname:gname,
uname:uname,
tel:tel,
price:price,
city:city,
regdate:regdate,
state:'未发货'
});
$scope.pd=false;
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<center>
<input type = "text" placeholder="输入内容查找" ng-model="namecx" />
<select ng-model="statecx">
<option value="">--请选择--</option>
<option>未发货</option>
<option>已发货</option>
</select>
<button ng-click="del_all()">批量删除</button>
<button ng-click="pd=!pd">新增订单</button>
<table border="1px">
<tr>
<td><input type = "checkbox" ng-click="ck_all()" ng-model="flag"/></td>
<td>商品编号<button ng-click="namepx='id';f=!f">排序</button></td>
<td>商品名称</td>
<td>用户名</td>
<td>电话</td>
<td>价格<button ng-click="namepx='price';f=!f">排序</button></td>
<td>地址</td>
<td>日期</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="d in datas | filter:namecx | filter:{state:statecx}|orderBy:namepx:f">
<td><input type = "checkbox" ng-model="d.c"/></td>
<td>{{d.id}}</td>
<td>{{d.gname}}</td>
<td>{{d.uname}}</td>
<td>{{d.tel}}</td>
<td>
<span ng-show="!xg">{{d.price |currency:'¥:'}}</span>
<input type="number" ng-show="xg" ng-model="d.price" >
</td>
<td>{{d.city}}</td>
<td>{{d.regdate | date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td>
<span style="background: yellow;" ng-show="d.state=='未发货'">
<a href="#"ng-click="d.state='已发货'">未发货</a>
</span>
<span style="background: green;" ng-show="d.state=='已发货'">已发货</span>
</td>
<td>
<button style="background: yellow;" ng-click="xg=!xg">修改</button>
<button style="background: red;" ng-click="dele_a(d.id)">删除</button>
</td>
</tr>
</table>
<div ng-show="pd">
<table>
<tr>
<td>商品编号</td>
<td><input type="number" ng-model="add_id"/>
<span>{{errors.id}}</span>
</td>
</tr>
<tr>
<td>商品名称</td>
<td><input type="text" ng-model="add_gname"/>
<span>{{errors.gname}}</span>
</td>
</tr>
<tr>
<td>用户名称</td>
<td><input type="text" ng-model="add_uname"/></td>
</tr>
<tr>
<td>电话号码</td>
<td><input type="text" ng-model="add_tel"/></td>
</tr>
<tr>
<td>商品价格</td>
<td><input type="text" ng-model="add_price"/></td>
</tr>
<tr>
<td>发货地址</td>
<td><input type="text" ng-model="add_city"/></td>
</tr>
<tr>
<td>订单日期</td>
<td><input type="text" ng-model="add_regdate"/></td>
</tr>
</table>
<button style="background: green;" ng-click="add()">保存订单</button>
</div>
</center>
</body>
</html>