重要3

最新推荐文章于 2022-05-26 17:50:53 发布

twtxby

最新推荐文章于 2022-05-26 17:50:53 发布

阅读量221

点赞数 1

本文链接：https://blog.csdn.net/xiaozi_01anfen/article/details/79102680

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>
<script src="../js/jquery-1.11.1.js"></script>
<script>
//1.创建模块
var app = angular.module("mjb", []);

app.controller("democ", function($scope) {
//修改按钮
$scope.f=false;
$scope.stus = [{
ck: false,
id: 2,
goodsname: 'OPPOR11',
username: '马家宝',
phone: 17310287086,
price: 4430,
city: '北京',
time: new Date("2017-7-4"),
zt: '已发货'
},
{
ck: false,
id: 3,
goodsname: 'Phone 7 plus',
username: '宇慧',
phone: 1835421872,
price: 4430,
city: '太原',
time: new Date("2017-2-4"),
zt: '未发货'
},
{
ck: false,
id: 3,
goodsname: 'Phone 7 plus',
username: '南向宇',
phone: 18366666600,
price: 4430,
city: '焦作',
time: new Date("2017-2-4"),
zt: '未发货'
},
{
ck: false,
id: 5,
goodsname: 'Phone 7',
username: '孙丽媛',
phone: 13400000000,
price: 5030,
city: '河南',
time: new Date("2017-3-4"),
zt: '已发货'
},
{
ck: false,
id: 8,
goodsname: 'OPPOR11',
username: '马家宝',
phone: 17300000000,
price: 4430,
city: '北京',
time: new Date("2017-7-4"),
zt: '已发货'
},
{
ck: false,
id: 4,
goodsname: 'Phone 7 plus',
username: '宇慧',
phone: 18366666600,
price: 4430,
city: '太原',
time: new Date("2017-2-4"),
zt: '未发货'
},
{
ck: false,
id: 6,
goodsname: 'Phone 7 plus',
username: '南向宇',
phone: 18366666600,
price: 4430,
city: '焦作',
time: new Date("2017-2-4"),
zt: '未发货'
},
{
ck: false,
id: 7,
goodsname: 'Phone 7',
username: '孙丽媛',
phone: 13400000000,
price: 5030,
city: '河南',
time: new Date("2017-3-4"),
zt: '已发货'
}

];
$scope.tableshow = false;
$scope.divshow=false;

//向表内添加数据
$scope.add = function() {

$scope.checkSub=[];//创建一个存放错误信息的数据
var ids = $scope.addid;
var goodsnames = $scope.addgoodsname;
var usernames = $scope.addusername;
var phones = $scope.addphone;
var prices = $scope.addprice;
var citys = $scope.addcity;
var times = $scope.addtime;
var zts = $scope.addzt;

if(ids==""||ids==null){
$scope.checkSub.push("产品编号不能为空");
}else if(isNaN(ids)){
$scope.checkSub.push("产品编号不是整数")
}

if(goodsnames==""||goodsnames==null){
$scope.checkSub.push("商品名称不能为空");
}
if(usernames==""||usernames==null){
$scope.checkSub.push("用户名不能为空");
}
if(phones==""||phones==null){
$scope.checkSub.push("手机号不能为空");
}else if(isNaN(phones)){
$scope.checkSub.push("手机号不是整数")
}else if(phones.length!=11){
$scope.checkSub.push("手机号不是11位")
}
if(prices==""||prices==null){
$scope.checkSub.push("价格不能为空");
}else if(isNaN(prices)){
$scope.checkSub.push("价格不是整数")
}
if(citys==""||citys==null){
$scope.checkSub.push("城市不能为空");
}
if(times==""||times==null){
$scope.checkSub.push("时间不能为空");
}
if(zts==""||zts==null){
$scope.checkSub.push("状态不能为空");
}

if($scope.checkSub.length!=0){
$scope.divshow=true;
}else{
$scope.divshow=false;
$scope.tableshow = false;

//处理商品名中是否含有米-->则替换
var reg_=/米/g;
var suname=$scope.addgoodsname.replace(reg_,"*");
$scope.goodsname=suname;

$scope.stus.push({
id: $scope.addid,
goodsname: suname,
username: $scope.addusername,
phone: $scope.addphone,
price: $scope.addprice,
city: $scope.addcity,
time: $scope.addtime,
zt: $scope.addzt
})}

}
$scope.quxiao = function() {
$scope.tableshow = false;
}
$scope.yue = function(m) {
console.log(m);
var currentd = m.getMonth() + 1;
//先获取开始的时间
var start = $scope.startm;
//先获结束的时间
var end = $scope.endm;

if(start == undefined && end == undefined) {
return true;
} else if(currentd >= start && currentd <= end) {
return true;
}

return false；
}
//批量删除
$scope.delAll = function() {
var count = 0;

//遍历数组
for(var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].ck) {
count++;
$scope.stus.splice(i, 1);
i--;
}
}

if(count == 0) {
alert("请选择!");
}

}
$scope.ckAll = function() {
for(var i = 0; i < $scope.stus.length; i++) {
$scope.stus[i].ck = $scope.flag;
}
}
//批量发货
$scope.fhAll = function() {
var b = false; //默认么有选中的
for(var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].ck == true) {
b = true;
break;
}
}
//执行删除操作
if(b == true) {
for(var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].ck == true) {
$scope.stus[i].zt = "已发货";
}
}
} else {
alert("请选择后操作");
}
}
$scope.delect=function(i){
$scope.stus.splice(i,1);
}
});
</script>
<style>
table tr:nth-child(2n+1) {
background-color: #CDCDC1;
}
</style>
</head>

<body ng-app="mjb" ng-controller="democ">
<input style="margin-right: 5px;" type="text" ng-model="sname" placeholder="用户搜索" />
<input style="margin-right: 5px;" type="text" ng-model="sphone" placeholder="手机号搜索" />
<select style="height: 25px;margin-top: 9px;" ng-model="chengshi">
<option value="">请选择城市</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>广东</option>
<option>深圳</option>
<option>天津</option>
</select>
<select style="height: 25px;margin-top: 9px;" ng-model="zhuangtai">
<option value="">请选择状态</option>
<option>未发货</option>
<option>已发货</option>
</select>
<select style="height: 25px;margin-top: 9px;" ng-model="paixu">
<option value="">ID排序</option>
<option value="+id">升序</option>
<option value="-id">降序</option>
</select>
<select style="height: 25px;margin-top: 9px;" ng-model="startm">
<option value="">开始月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<span>-</span>
<select style="height: 25px;margin-top: 9px;" ng-model="endm">
<option value="">结束月份</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<br/>
<input ng-click="tableshow=true" type="button" value="新增用户" style="background: greenyellow;margin-top: 5px;" />
<input ng-click="fhAll()" type="button" value="批量发货" style="background: greenyellow;margin-top: 5px;" />
<input ng-click="delAll()" type="button" value="批量删除" style="background: #EE2C2C;margin-top: 5px;" />
<span style="color: gray;">敏感字:米(商品名)-->替换成*</span>
<table border="1px" style="width: 900px;margin-top: 10px;">
<tr align="center" style="background: darkgrey;">
<td><input type="checkbox" ng-click="ckAll()" ng-model="flag" /></td>
<td>ID</td>
<td>商品名</td>
<td>用户名</td>
<td>手机号</td>
<td>价格</td>
<td>城市</td>
<td>下单时间</td>
<td>状态</td>
<td>操作</td>
</tr>
<tr ng-repeat="j in stus|orderBy:paixu|filter:{username:sname,phone:sphone,city:chengshi,zt:zhuangtai}" align="center" ng-show="yue(j.time)">
<td><input type="checkbox" ng-model="j.ck" /></td>
<td>{{j.id}}</td>
<td>
<span ng-hide="f">{{j.goodsname}} </span>
<span ng-show="f">
<input ng-model="j.goodsname" />
</span>
</td>
<td>{{j.username}}</td>
<td>{{j.phone}}</td>
<td>{{j.price|currency:'¥'}}</td>
<td>{{j.city}}</td>
<td>{{j.time|date:'MM-dd hh:mm'}}</td>
<td>
<span style="color: red;" ng-if="j.zt=='未发货'">
<a style="color: red;" href="#" ng-click="j.zt='已发货'">{{j.zt}}</a>
</span>
<span style="color: cyan;" ng-if="j.zt=='已发货'">
已发货
</span>

</td>
<td>
<input type="button" ng-click="f=!f" value="修改" />
<input type="button" ng-click="delect($index)" value="删除" />
</td>
</tr>
</table>
<table ng-show="tableshow" style="float: left;">
<tr>
<td>ID</td>
<td><input type="text" ng-model="addid" /></td>
</tr>
<tr>
<td>商品名</td>
<td><input type="text" ng-model="addgoodsname" /></td>
</tr>
<tr>
<td>用户名</td>
<td><input type="text" ng-model="addusername" /></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" ng-model="addphone" /></td>
</tr>
<tr>
<td>价格</td>
<td><input type="text" ng-model="addprice" /></td>
</tr>
<tr>
<td>城市</td>
<td><input type="text" ng-model="addcity" /></td>
</tr>
<tr>
<td>下单时间</td>
<td><input type="date" ng-model="addtime" /></td>
</tr>
<tr>
<td>状态</td>
<td><input type="text" ng-model="addzt" /></td>
</tr>
<tr>
<td colspan="10">
<input style="width: 124px;" type="button" ng-click="add()" value="保存" />
<input style="width: 124px;" type="button" ng-click="quxiao()" value="取消" />
</td>
</tr>

</table>
<div ng-show="divshow" style="width: 640px;height: 240px;background: orange;float: left;">
<ul>
<li ng-repeat="c in checkSub">{{c}}</li>
</ul>
</div>

</body>

</html>