<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#tianjia input{
display: block;
}
</style>
<script src="js/angular.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.products = [{
id:7,
pname:"OPPO R9sk",
uname:"关羽",
tel:15777777777,
price:4999,
city:"北京",
regDate:"03-09 10:00",
astate:"已发货",
state:false
},{
id:12,
pname:"vivo X20",
uname:"赵云",
tel:13569852200,
price:2998,
city:"上海",
regDate:"08-22 10:00",
astate:"已发货",
state:false
},{
id:1,
pname:"iphone 8plus",
uname:"曹操",
tel:15200698563,
price:7588,
city:"北京",
regDate:"09-04 10:00",
astate:"已发货",
state:false
},{
id:11,
pname:"华为 畅享6S",
uname:"刘备",
tel:13922006666,
price:899,
city:"天津",
regDate:"08-09 10:00",
astate:"未发货",
state:false
},{
id:10,
pname:"小米Note5",
uname:"黄忠",
tel:13796258864,
price:699,
city:"重庆",
regDate:"02-28 10:00",
astate:"未发货",
state:false
},{
id:9,
pname:"魅蓝 5S",
uname:"夏侯淳",
tel:15777235489,
price:999,
city:"深圳",
regDate:"10-03 10:00",
astate:"已发货",
state:false
},{
id:8,
pname:"努比亚 Z17",
uname:"孙权",
tel:15333333333,
price:2099,
city:"上海",
regDate:"07-01 10:00",
astate:"未发货",
state:false
},{
id:15,
pname:"红*5A",
uname:"周瑜",
tel:18355697781,
price:599,
city:"广州",
regDate:"11-11 00:12",
astate:"未发货",
state:false
}];
$scope.searchName = "";
$scope.searchTel = "";
//删除
$scope.del = function(clumn){
for(index in $scope.products){
if($scope.products[index].id == clumn){
$scope.products.splice(index,1);
}
}
};
//全选、全不选
$scope.checkAll = false;
$scope.checkAllFun = function(){
if($scope.checkAll){
for(index in $scope.products){
$scope.products[index].state = true;
}
}
else{
for(index in $scope.products){
$scope.products[index].state = false;
}
}
};
//批量删除
$scope.plDel = function(){
var arr = [];
for(index in $scope.products){
if($scope.products[index].state){
arr.push($scope.products[index]);
}
}
if(confirm("您确定要删除?")){
for(index1 in arr){
for(index2 in $scope.products){
if(arr[index1].id == $scope.products[index2].id){
$scope.products.splice(index2,1);
}
}
}
}
};
//新增用户
$scope.add = function(){
var reg = /米/g;
var miname = $scope.add_pname.replace(reg,"*");
var p = {
id:$scope.add_ID,
pname:miname,
uname:$scope.add_uname,
tel:$scope.add_tel,
price:$scope.add_price,
city:$scope.add_city,
regDate:$scope.add_regDate,
astate:$scope.add_astate
}
$scope.products.push(p);
$scope.add_ID = "";
$scope.add_pname = "";
$scope.add_uname = "";
$scope.add_tel = "";
$scope.add_price = "";
$scope.add_city = "";
$scope.add_regDate = "";
$scope.add_astate = "";
$scope.isshow = false;
};
//批量发货
$scope.plfh = function(){
for(index in $scope.products){
if($scope.products[index].state){
$scope.products[index].astate = "已发货";
$scope.products[index].state = false;
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>展示商品页面</h3>
<input type="text" placeholder="用户名搜索" ng-model="searchName"/>
<input type="text" placeholder="手机号搜索" ng-model="searchTel"/>
<select ng-model="xzcity">
<option value="">请选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
<option>深圳</option>
<option>广州</option>
</select>
<select ng-model="xzastate">
<option value="">请选择状态</option>
<option>未发货</option>
<option>已发货</option>
</select><br /><br />
<button ng-click="isshow = true">新增订单</button>
<button ng-click="plDel()">批量删除</button>
<button ng-click="plfh()">批量发货</button><br /><br />
<table border="1px" cellpadding="10" cellspacing="0">
<thead align="center">
<tr>
<th><input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()"/></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody align="center">
<tr ng-repeat="pro in products | filter:{uname:searchName} | filter:{tel:searchTel} | filter:{city:xzcity} | filter:{astate:xzastate}">
<td><input type="checkbox" ng-model="pro.state"/></td>
<td>{{pro.id}}</td>
<td>{{pro.pname}}</td>
<td>{{pro.uname}}</td>
<td>{{pro.tel}}</td>
<td><span ng-hide="xsinput">{{pro.price | currency:"¥"}}</span><span ng-show="xsinput"><input type="text" ng-model="pro.price"/><button ng-click="xsinput = false">保存</button></span></td>
<td>{{pro.city}}</td>
<td>{{pro.regDate}}</td>
<td>
<span ng-if="pro.astate == '未发货'">
<a href="#" ng-click="pro.astate = '已发货'">{{pro.astate}}</a>
</span>
<span ng-if="pro.astate == '已发货'">
已发货
</span>
</td>
<td><button ng-click="xsinput = true">修改</button> <button ng-click="del(pro.id)">删除</button></td>
</tr>
</tbody>
</table>
<div id="tianjia" ng-show="isshow">
<h3>添加商品</h3>
ID:<input type="text" placeholder="请输入ID" ng-model="add_ID"/>
商品名:<input type="text" placeholder="请输入商品名称" ng-model="add_pname"/>
用户名:<input type="text" placeholder="请输入用户名" ng-model="add_uname"/>
手机号:<input type="text" placeholder="请输入手机号" ng-model="add_tel"/>
价格:<input type="text" placeholder="请输入商品价格" ng-model="add_price"/>
城市:<input type="text" placeholder="请输入所在城市" ng-model="add_city"/>
下单时间:<input type="text" placeholder="请输入下单时间" ng-model="add_regDate"/>
状态:<input type="text" placeholder="请输入状态" ng-model="add_astate"/>
<button ng-click="add()">保存</button>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#tianjia input{
display: block;
}
</style>
<script src="js/angular.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.products = [{
id:7,
pname:"OPPO R9sk",
uname:"关羽",
tel:15777777777,
price:4999,
city:"北京",
regDate:"03-09 10:00",
astate:"已发货",
state:false
},{
id:12,
pname:"vivo X20",
uname:"赵云",
tel:13569852200,
price:2998,
city:"上海",
regDate:"08-22 10:00",
astate:"已发货",
state:false
},{
id:1,
pname:"iphone 8plus",
uname:"曹操",
tel:15200698563,
price:7588,
city:"北京",
regDate:"09-04 10:00",
astate:"已发货",
state:false
},{
id:11,
pname:"华为 畅享6S",
uname:"刘备",
tel:13922006666,
price:899,
city:"天津",
regDate:"08-09 10:00",
astate:"未发货",
state:false
},{
id:10,
pname:"小米Note5",
uname:"黄忠",
tel:13796258864,
price:699,
city:"重庆",
regDate:"02-28 10:00",
astate:"未发货",
state:false
},{
id:9,
pname:"魅蓝 5S",
uname:"夏侯淳",
tel:15777235489,
price:999,
city:"深圳",
regDate:"10-03 10:00",
astate:"已发货",
state:false
},{
id:8,
pname:"努比亚 Z17",
uname:"孙权",
tel:15333333333,
price:2099,
city:"上海",
regDate:"07-01 10:00",
astate:"未发货",
state:false
},{
id:15,
pname:"红*5A",
uname:"周瑜",
tel:18355697781,
price:599,
city:"广州",
regDate:"11-11 00:12",
astate:"未发货",
state:false
}];
$scope.searchName = "";
$scope.searchTel = "";
//删除
$scope.del = function(clumn){
for(index in $scope.products){
if($scope.products[index].id == clumn){
$scope.products.splice(index,1);
}
}
};
//全选、全不选
$scope.checkAll = false;
$scope.checkAllFun = function(){
if($scope.checkAll){
for(index in $scope.products){
$scope.products[index].state = true;
}
}
else{
for(index in $scope.products){
$scope.products[index].state = false;
}
}
};
//批量删除
$scope.plDel = function(){
var arr = [];
for(index in $scope.products){
if($scope.products[index].state){
arr.push($scope.products[index]);
}
}
if(confirm("您确定要删除?")){
for(index1 in arr){
for(index2 in $scope.products){
if(arr[index1].id == $scope.products[index2].id){
$scope.products.splice(index2,1);
}
}
}
}
};
//新增用户
$scope.add = function(){
var reg = /米/g;
var miname = $scope.add_pname.replace(reg,"*");
var p = {
id:$scope.add_ID,
pname:miname,
uname:$scope.add_uname,
tel:$scope.add_tel,
price:$scope.add_price,
city:$scope.add_city,
regDate:$scope.add_regDate,
astate:$scope.add_astate
}
$scope.products.push(p);
$scope.add_ID = "";
$scope.add_pname = "";
$scope.add_uname = "";
$scope.add_tel = "";
$scope.add_price = "";
$scope.add_city = "";
$scope.add_regDate = "";
$scope.add_astate = "";
$scope.isshow = false;
};
//批量发货
$scope.plfh = function(){
for(index in $scope.products){
if($scope.products[index].state){
$scope.products[index].astate = "已发货";
$scope.products[index].state = false;
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>展示商品页面</h3>
<input type="text" placeholder="用户名搜索" ng-model="searchName"/>
<input type="text" placeholder="手机号搜索" ng-model="searchTel"/>
<select ng-model="xzcity">
<option value="">请选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
<option>深圳</option>
<option>广州</option>
</select>
<select ng-model="xzastate">
<option value="">请选择状态</option>
<option>未发货</option>
<option>已发货</option>
</select><br /><br />
<button ng-click="isshow = true">新增订单</button>
<button ng-click="plDel()">批量删除</button>
<button ng-click="plfh()">批量发货</button><br /><br />
<table border="1px" cellpadding="10" cellspacing="0">
<thead align="center">
<tr>
<th><input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()"/></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody align="center">
<tr ng-repeat="pro in products | filter:{uname:searchName} | filter:{tel:searchTel} | filter:{city:xzcity} | filter:{astate:xzastate}">
<td><input type="checkbox" ng-model="pro.state"/></td>
<td>{{pro.id}}</td>
<td>{{pro.pname}}</td>
<td>{{pro.uname}}</td>
<td>{{pro.tel}}</td>
<td><span ng-hide="xsinput">{{pro.price | currency:"¥"}}</span><span ng-show="xsinput"><input type="text" ng-model="pro.price"/><button ng-click="xsinput = false">保存</button></span></td>
<td>{{pro.city}}</td>
<td>{{pro.regDate}}</td>
<td>
<span ng-if="pro.astate == '未发货'">
<a href="#" ng-click="pro.astate = '已发货'">{{pro.astate}}</a>
</span>
<span ng-if="pro.astate == '已发货'">
已发货
</span>
</td>
<td><button ng-click="xsinput = true">修改</button> <button ng-click="del(pro.id)">删除</button></td>
</tr>
</tbody>
</table>
<div id="tianjia" ng-show="isshow">
<h3>添加商品</h3>
ID:<input type="text" placeholder="请输入ID" ng-model="add_ID"/>
商品名:<input type="text" placeholder="请输入商品名称" ng-model="add_pname"/>
用户名:<input type="text" placeholder="请输入用户名" ng-model="add_uname"/>
手机号:<input type="text" placeholder="请输入手机号" ng-model="add_tel"/>
价格:<input type="text" placeholder="请输入商品价格" ng-model="add_price"/>
城市:<input type="text" placeholder="请输入所在城市" ng-model="add_city"/>
下单时间:<input type="text" placeholder="请输入下单时间" ng-model="add_regDate"/>
状态:<input type="text" placeholder="请输入状态" ng-model="add_astate"/>
<button ng-click="add()">保存</button>
</div>
</center>
</body>
</html>