<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box{
width: 1000px;
height: 600px;
margin: 20px auto;
}
.box .ss{
width: 140px;
height: 20px;
border-radius: 3px;
border: 1px solid #c9c9c7;
margin-bottom: 10px;
}
.box .xz{
width: 138px;
height: 21px;
margin-bottom: 10px;
}
.box .an{
width: 67px;
height: 22px;
background: #006d00;
border-radius: 3px;
border: 1px solid #165a21;
color: #FFFFFF;
}
.box .bg{
width: 100%;
margin-top: 10px;
text-align: center;
}
.box .bg tr th{
background: #777775;
}
.box .bg tr:nth-child(2n) td{
background: #eeeeee;
}
.box .fr input{
margin-bottom: 10px;
}
</style>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
angular.module("myApp",[])
.controller("demoC",function($scope){
$scope.datas = [{
state:false,
id:7,
goodsname:"OPPO R9sk",
username:"关羽",
tel:15777777777,
price:4999,
city:"北京",
data:new Date("03-09 10:00"),
status:"已发货"
},{
state:false,
id:12,
goodsname:"VIVO X20",
username:"赵云",
tel:13333333333,
price:2998,
city:"上海",
data:new Date("08-22 10:00"),
status:"已发货"
},{
state:false,
id:1,
goodsname:"iPhone 8 Plus",
username:"曹操",
tel:15111111111,
price:7588,
city:"北京",
data:new Date("03-09 10:00"),
status:"已发货"
},{
state:false,
id:11,
goodsname:"小米Note5",
username:"黄忠",
tel:13222222222,
price:699,
city:"重庆",
data:new Date("02-28 10:00"),
status:"未发货"
},{
state:false,
id:10,
goodsname:"小米Mix2",
username:"黄盖",
tel:13111111111,
price:3299,
city:"北京",
data:new Date("03-15 10:00"),
status:"未发货"
},{
state:false,
id:9,
goodsname:"红米5A",
username:"周瑜",
tel:15999999999,
price:599,
city:"重庆",
data:new Date("06-16 10:00"),
status:"未发货"
},{
state:false,
id:8,
goodsname:"红米Note4X",
username:"张飞",
tel:15888888888,
price:999,
city:"上海",
data:new Date("05-18 10:00"),
status:"已发货"
},{
state:false,
id:2,
goodsname:"华为 畅享6s",
username:"刘备",
tel:15222222222,
price:899,
city:"天津",
data:new Date("08-09 10:00"),
status:"已发货"
},{
state:false,
id:6,
goodsname:"三星 Galaxy Note8",
username:"张辽",
tel:156666666666,
price:2599,
city:"北京",
data:new Date("04-02 10:00"),
status:"已发货"
},{
state:false,
id:5,
goodsname:"魅蓝5S",
username:"夏侯惇",
tel:15555555555,
price:999,
city:"北京",
data:new Date("10-03 10:00"),
status:"已发货"
},{
state:false,
id:4,
goodsname:"三星 Galaxy S7",
username:"司马懿",
tel:15444444444,
price:2999,
city:"北京",
data:new Date("06-02 10:00"),
status:"已发货"
},{
state:false,
id:3,
goodsname:"努比亚Z17",
username:"孙权",
tel:15333333333,
price:2099,
city:"上海",
data:new Date("07-01 10:00"),
status:"未发货"
}];
for(var i = 0; i < $scope.datas.length; i++){
if($scope.datas[i].goodsname.indexOf("米") != -1){
$scope.datas[i].goodsname = $scope.datas[i].goodsname.replace("米","*");
}
}
$scope.ckAll = function(){
var v = $scope.ckall;
for(var i = 0; i < $scope.datas.length; i++){
$scope.datas[i].state = v;
}
}
$scope.del = function(index){
$scope.datas.splice(index,1);
}
$scope.delAll = function(){
var plsc = [];
for(var i = 0; i < $scope.datas.length; i++){
if($scope.datas[i].state){
$scope.datas.splice(i,1);
plsc.push($scope.datas[i].state);
i--;
}
}
if(plsc.length == 0){
alert("请选择要删除的数据");
}
}
$scope.statusAll = function(){
var plsc = [];
for(var i = 0; i < $scope.datas.length; i++){
if($scope.datas[i].state){
if($scope.datas[i].status == "未发货"){
plsc.push($scope.datas[i].status);
$scope.datas[i].status = "已发货"
}else{
plsc.push($scope.datas[i].status);
}
}
}
if(plsc.length == 0){
alert("请选择要发货的数据");
}
}
$scope.month = function(m){
var v = m.getMonth() + 1;
if ($scope.begin <= v && v <=$scope.finish) {
return true;
} else if($scope.begin == undefined || $scope.begin == "" || $scope.finish == undefined || $scope.finish == ""){
return true;
} else {
return false;
}
}
$scope.flag = false;
$scope.fl = false;
$scope.add = function(){
$scope.pd = [];
if($scope.newid == undefined || $scope.newid == ""){
$scope.pd.push("ID不能为空");
}
if($scope.newgoodsname == undefined || $scope.newgoodsname == ""){
$scope.pd.push("商品名不能为空");
}
if($scope.newusername == undefined || $scope.newusername == ""){
$scope.pd.push("用户名不能为空");
}
if($scope.newtel == undefined || $scope.newtel == ""){
$scope.pd.push("电话不能为空");
}
if($scope.newprice == undefined || $scope.newprice == ""){
$scope.pd.push("价格不能为空");
}
if($scope.newcity == undefined || $scope.newcity == ""){
$scope.pd.push("城市不能为空");
}
if($scope.pd.length == 0){
$scope.flag = false;
$scope.datas.push({
state:false,
id:$scope.newid,
goodsname:$scope.newgoodsname,
username:$scope.newusername,
tel:$scope.newtel,
price:$scope.newprice,
city:$scope.newcity,
data:new Date(),
status:"未发货"
});
for(var i = 0; i < $scope.datas.length; i++){
if($scope.datas[i].goodsname.indexOf("米") != -1){
$scope.datas[i].goodsname = $scope.datas[i].goodsname.replace("米","*");
}
}
}else{
alert("不能为空");
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="demoC">
<div class="box">
<input type="text" placeholder="用户名搜索" class="ss" ng-model="usernamess" />
<input type="tel" placeholder="手机号搜索" class="ss" ng-model="telss" />
<select class="xz" ng-model="xzcity">
<option value="">--请选择城市--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
<option value="河南">河南</option>
</select>
<select class="xz" ng-model="xzstatus">
<option value="">--请选择状态--</option>
<option value="已发货">已发货</option>
<option value="未发货">未发货</option>
</select>
<select class="xz" ng-model="begin">
<option value="">开始月份</option>
<option value="1">1月份</option>
<option value="2">2月份</option>
<option value="3">3月份</option>
<option value="4">4月份</option>
<option value="5">5月份</option>
<option value="6">6月份</option>
<option value="7">7月份</option>
<option value="8">8月份</option>
<option value="9">9月份</option>
<option value="10">10月份</option>
<option value="11">11月份</option>
<option value="12">12月份</option>
</select>
<select class="xz" ng-model="finish">
<option value="">结束月份</option>
<option value="1">1月份</option>
<option value="2">2月份</option>
<option value="3">3月份</option>
<option value="4">4月份</option>
<option value="5">5月份</option>
<option value="6">6月份</option>
<option value="7">7月份</option>
<option value="8">8月份</option>
<option value="9">9月份</option>
<option value="10">10月份</option>
<option value="11">11月份</option>
<option value="12">12月份</option>
</select>
<select class="xz" ng-model="px">
<option value="">--请选择排序方式--</option>
<option value="id">ID排序</option>
<option value="price">价格排序</option>
<option value="data">时间排序</option>
</select>
<input type="button" value="新增订单" class="an" ng-click="flag = !flag" />
<input type="button" value="批量发货" class="an" ng-click="statusAll()" />
<input type="button" value="批量删除" class="an" style="background: #e91600;" ng-click="delAll()" />
<span style="font-size: 14px;">敏感字 : 米(商品名) -> 替换成 *</span>
<table border="1" cellspacing="0" cellpadding="0" class="bg">
<tr>
<th><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr ng-repeat="b in datas | filter : {username : usernamess} | filter : {tel : telss} | filter : {city : xzcity} | filter : {status : xzstatus} | orderBy : px" ng-show="month(b.data)">
<td><input type="checkbox" ng-model="b.state"></td>
<td>{{b.id}}</td>
<td>{{b.goodsname}}</td>
<td>
<span ng-show="!fl">{{b.username}}</span>
<input type="text" ng-model="b.username" ng-show="fl" style="width: 80px; height: 20px;" />
</td>
<td>{{b.tel}}</td>
<td>{{b.price | currency : "￥"}}</td>
<td>{{b.city}}</td>
<td>{{b.data | date : "MM-dd hh:mm"}}</td>
<td>
<a href="" ng-show="b.status == '未发货'" ng-click="b.status = '已发货'">
发货
</a>
<span ng-show="b.status == '已发货'">{{b.status}}</span>
</td>
<td>
<a href="#" ng-click="fl=true" ng-show="!fl">修改</a>
<a href="#" ng-show="fl" ng-click="fl=false">保存</a>
<a href="#" ng-click="del($index)">删除</a>
</td>
</tr>
</table>
<form style="width: 240px; margin: 20px auto; border: 1px solid #000000; text-align: center; padding-top: 20px; padding-bottom: 10px" ng-show="flag" class="fr">
<input type="text" placeholder="请输入id" ng-model="newid" />
<input type="text" placeholder="请输入商品名" ng-model="newgoodsname" />
<input type="text" placeholder="请输入用户名" ng-model="newusername" />
<input type="text" placeholder="请输入手机号" ng-model="newtel" />
<input type="text" placeholder="请输入价格" ng-model="newprice" />
<input type="text" placeholder="请输入城市" ng-model="newcity" /><br />
<input type="button" value="保存" ng-click="add()" />
</form>
</div>
</body>
</html>
扫一扫
03-03
2270
2270
12-11
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
