angularjs删除发货新增排序等

最新推荐文章于 2024-05-23 11:15:25 发布

CHHDEVIL

最新推荐文章于 2024-05-23 11:15:25 发布

阅读量127

点赞数

分类专栏： angularjs 文章标签： js css angular

本文链接：https://blog.csdn.net/weixin_41637420/article/details/79072506

版权

angularjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table tr th{background:#777775}
table tr:nth-child(even){background:#ccccca}
table tr{text-align: center;}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
angular.module("myApp",[])
.controller("myCtrl",function($scope){

$scope.p = [1,2,3,4,5,6,7,8,9,10,11,12];

$scope.pros=[{
ck:false,
id:5,
sname:"OPPO R9sk",
yname:"小明",
tel:13661135723,
price:2400,
city:"北京",
time:new Date("2017-3-09 10:00"),
state:'已发货'
},{
ck:false,
id:3,
sname:"vivo",
yname:"小黄",
tel:13856891452,
price:3100,
city:"上海",
time:new Date("2017-9-09 10:00"),
state:'未发货'
},{
ck:false,
id:1,
sname:"华为",
yname:"张三",
tel:18745345453,
price:6500,
city:"深圳",
time:new Date("2017-6-09 10:00"),
state:'已发货'
},{
ck:false,
id:4,
sname:"红米Note4X",
yname:"李四",
tel:15898566589,
price:2400,
city:"重庆",
time:new Date("2017-4-09 10:00"),
state:'未发货'
}];
//搜索
$scope.yh = "";
$scope.sjh = "";
//全选反选
$scope.choose = function(){
for(index in $scope.pros){
$scope.pros[index].ck = $scope.xuan;
}
}
//删除
$scope.del = function(clnmu){
for(index in $scope.pros){
if($scope.pros[index].id==clnmu){
$scope.pros.splice(index,1);
}
}
}
//批量删除
$scope.delAll = function(){
for(var i=0;i<$scope.pros.length;i++){
if($scope.pros[i].ck==true){
$scope.pros.splice(i,1);
i--;
}
}
}
//批量发货
$scope.plfh = function(){
for(var i=0;i<$scope.pros.length;i++){
if($scope.pros[i].state){
$scope.pros[i].state="已发货";
}
}
}
//新增订单
$scope.add = function(){
var newSname=$scope.newSname;
var newYname=$scope.newYname;
var newTel=$scope.newTel;
var newPrice=$scope.newPrice;
var newCity=$scope.newCity;
var newTime=new Date();

var id=0;
for(index in $scope.pros){
if($scope.pros[index].id>id){
var id = $scope.pros[index].id;
}
}
var newId = id+1;
var pro={
ck:false,
id:newId,
sname:newSname,
yname:newYname,
tel:newTel,
price:newPrice,
city:newCity,
time:newTime,
state:"未发货"
}

$scope.pros.push(pro);
$scope.isshow=false;
}
//设置月份的开始和结束
$scope.yue = function(d) {

//通过日期格式获取月份
var m = d.getMonth() + 1; //0-11之间
//获取开始下拉列表
var start = $scope.startTime;
var end = $scope.overTime;
console.log("开始",start);
console.log("结束",end);
if(start == undefined || start == "") {
start = 1;
}

if(end == undefined || end == "") {
end = 12;
}

if(m >= start && m <= end) {
return true;
} else {
return false;
}
}
})
.filter("myFilter",function(){
return function(text){
return text.replace(/米/g,"*");
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="用户名搜索" ng-model="yh"/>
<input type="text" placeholder="手机号搜索" ng-model="sjh"/>
<select ng-model="chooseCity">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
<option>重庆</option>
</select>
<select ng-model="chooseState">
<option value="">选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>
<select ng-model="startTime">
<option value="">开始月份</option>
<option ng-repeat="a in p">{{a}}</option>
</select>
-
<select ng-model="overTime">
<option value="">结束月份</option>
<option ng-repeat="m in p">{{m}}</option>
</select>
<select ng-model="pai">
<option value="">ID排序</option>
<option value="id">正序</option>
<option value="-id">倒序</option>
</select><br>
<button ng-click="isshow=true">新增订单</button>
<button ng-click="plfh()">批量发货</button>
<button ng-click="delAll()">批量删除</button>
<span>敏感字:米(商品名)->替换成*</span><br>
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th><input type="checkbox" ng-model="xuan" ng-click="choose()"></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr ng-repeat="p in pros | filter:{yname:yh,tel:sjh,city:chooseCity,state:chooseState } | orderBy:pai" ng-show="yue(p.time)">
<td><input type="checkbox" ng-model="p.ck"></td>
<td>{{p.id}}</td>
<td>{{p.sname | myFilter}}</td>
<td>{{p.yname}}</td>
<td>{{p.tel}}</td>
<td>
<span ng-hide="xginput">{{p.price | currency:"￥" }}</span>
<span ng-show="xginput">
<input type="text" ng-model="p.price">
<button ng-click="xginput=false">保存</button>
</span>
</td>
<td>{{p.city}}</td>
<td>{{p.time | date:"MM-dd hh:mm" }}</td>
<td>
<span ng-if="p.state=='已发货'">
已发货
</span>
<span ng-if="p.state=='未发货'">
<a href="#" ng-click="p.state='已发货'">未发货</a>
</span>
</td>
<td>
<a href="#" ng-click="del(p.id)">删除</a>
<a href="#" ng-click="xginput=true">修改</a>
</td>
</tr>
</table>
<form ng-show="isshow">
<h2>新增商品</h2>
商品名:<input placeholder="请输入商品" ng-model="newSname"/><br>
用户名:<input placeholder="请输入用户名" ng-model="newYname"/><br>
手机号:<input placeholder="请输入手机号" ng-model="newTel"/><br>
价　格:<input placeholder="请输入价格" ng-model="newPrice"/><br>
城　市:<input placeholder="请输入城市" ng-model="newCity"/><br>
<button ng-click="add()">保存</button>
</form>
</center>
</body>
</html>

CHHDEVIL

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs删除发货新增排序等

table tr th{background:#777775}table tr:nth-child(even){background:#ccccca}table tr{text-align: center;}angular.module("myApp",[]).controller("myCtrl",function($scope){$scope.p = [1,
复制链接

扫一扫