网页的增删改查

最新推荐文章于 2024-06-17 14:53:41 发布

无糖咖啡有点苦

最新推荐文章于 2024-06-17 14:53:41 发布

阅读量611

点赞数

本文链接：https://blog.csdn.net/qq1135058549/article/details/79058583

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
#container input{
display: block;
}
</style>
<script src="js/angular.min.js"></script>

<script>
angular.module("gaoyn", [])
.controller("democ", function($scope) {
//控制添加区域是否隐藏

$scope.goods = [];
for(var i = 0; i < 5; i++) {
var g = {
ck: false,
id: i + 10,
gname: 'oppo' + i,
uname: '张飞' + i,
tel: "13522746372",
price: 1000 + i,
city: '北京',
regdate: new Date("2017-7-" + (i + 1)),
state: '未发货'
};
var g1 = {
ck: false,
id: i + 1,
gname: 'oppo' + i,
uname: '赵云' + i,
tel: "13522746372",
price: 1000 + i,
city: '上海',
regdate: new Date("2017-1-" + (i + 1)),
state: '已发货'
};
$scope.goods.push(g);
$scope.goods.push(g1);
}

$scope.ms = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
$scope.citys = ["北京", "上海"];

$scope.save = function() {
//处理商品名中是否含有米-->则替换
var reg_=/米/g;
var suname=$scope.add_gname.replace(reg_,"*");
console.log(suname,"++++");
var g1 = {
ck: false,
id: $scope.goods.length + 1, //新增id,id不能重复
gname: suname,
uname: $scope.add_uname,
tel: $scope.add_tel,
price: $scope.add_price,
city: $scope.add_city,
regdate: new Date(),
state: '未发货'
};
$scope.goods.push(g1);
$scope. showsave=false; //让添加区域进行隐藏

}
//批量发货
$scope.fhall = function() {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].ck) {
$scope.goods[i].state = '已发货';
}
}
}
$scope.delall = function() {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].ck) {
$scope.goods.splice(i, 1);
i--; //防止隔行删除
}
}
}

//设置月份的开始和结束
$scope.yue = function(m) {
var currentd = m.getMonth() + 1; //0-11

//获取开始日期
var start = $scope.startm;

//获取结束月份
var end = $scope.endm;
if(start == "") start = undefined;
if(end == "") end = undefined;
if(start == undefined && end != undefined) {
if(currentd <= end) {
return true;
}
} else if(start != undefined && end == undefined) {
if(currentd >= start) {
return true;
}
} else if(start == undefined && end == undefined) {
return true;
} else if(currentd >= start && currentd <= end) {
return true;
}

return false;
}

})
</script>
<style>
tbody tr:nth-child(2n) {
background-color: #999;
}

thead th {
background: deepskyblue;
}
</style>
</head>

<body ng-app="gaoyn" ng-controller="democ">
<input type="text" placeholder='请输入查询的姓名' ng-model="sname" />
<input type="text" placeholder='手机号搜索' ng-model="stel" />
<select ng-model="scity">
<option value="">选择城市</option>-
<option ng-repeat="m in citys">{{m}}</option>
</select>
<select ng-model="sstate">
<option value="">选择状态</option>-
<option>已发货</option>
<option>未发货</option>
</select>
<select ng-model="startm">
<option value="">开始月份</option>-
<option ng-repeat="m in ms">{{m}}</option>
</select>
<select ng-model="endm">
<option value="">结束月份</option>
<option ng-repeat="m in ms">{{m}}</option>
</select>
<p>
<button ng-click="showsave=true">新增订单</button>
<button ng-click="fhall()">批量发货</button>
<button ng-click="delall()">批量删除</button> 敏感字:米(商品名)->替换成*
</p>
<table border="1px">
<thead>
<tr>
<th><input type="checkbox" ng-model="ckis" /></th>
<th>id</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in goods|filter:{uname:sname,tel:stel,city:scity,state:sstate}" ng-show="yue(g.regdate)">
<td><input type="checkbox" ng-model="g.ck" /> </td>
<td>{{g.id}}</td>
<td>{{g.gname}} </td>
<td>{{g.uname}} </td>
<td>{{g.tel}} </td>
<td>{{g.price|currency:'¥'}}</td>
<td>{{g.city}}</td>
<td>{{g.regdate|date:'MM-dd hh:mm'}}</td>
<td>
<span ng-if="g.state=='未发货'">

<a href="#" ng-click="g.state='已发货'">{{g.state}} </a>
</span>
<span ng-if="g.state=='已发货'">
已发货
</span>

</td>
<td><button>修改</button><button>删除</button></td>
</tr>
</tbody>
</table>
<div ng-show="showsave" id="container">
<input ng-model="add_gname" placeholder="请输入商品名" />
<input ng-model="add_uname" placeholder="请输入用户名" />
<input ng-model="add_tel" placeholder="请输入电话" type="tel" />
<input ng-model="add_price" placeholder="请输入价格" type="number" />
<select ng-model="add_city">
<option value="">请输入城市</option>
<option>北京</option>
<option>上海</option>
</select>
<button ng-click="save()">保存</button>
</div>
</body>

</html>

无糖咖啡有点苦

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页的增删改查

#container input{display: block;}1 创建数据 2.视图展示 -->angular.module("gaoyn", []).controller("democ", function($scope) {//控制添加区域是否隐藏$scope.goods = [];for(var i = 0; i var g =
复制链接

扫一扫