angularjs的批量删除，发货，
2018-01-16 11:11
441 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tbody tr:nth-child(even){
background-color: yellow;
text-align: center;
}
tbody tr:nth-child(odd){
background: pink;
text-align: center;
}
</style>
<script type="text/javascript" src="../js/angularjs-1.55/angular.js" ></script>
<script>
var app=angular.module("MyApp",[])
app.controller("MyCtrl",function($scope){
$scope.zhi=[{
ck:false,
id:1,
shopname:"小米",
name:"赵云",
hao:"12933101827",
price:1500,
city:"北京",
times:new Date("2018-12-01 01:36:09"),
tai:"未发货"
},{
ck:false,
id:2,
shopname:"OPPO X20",
name:"曹操",
hao:"17933101827",
price:2500,
city:"魏县",
times:new Date("2017-10-11 08:36:09"),
tai:"未发货"
},{
ck:false,
id:3,
shopname:"苹果",
name:"吕布",
hao:"14933101827",
price:7500,
city:"广平",
times:new Date("2018-08-11 12:36:09"),
tai:"未发货"
},{
ck:false,
id:4,
shopname:"索尼",
name:"黄忠",
hao:"16933101827",
price:500,
city:"上海",
times:new Date("2018-06-11 12:36:09"),
tai:"未发货"
}]
$scope.zhuang=function(id){
for (index in $scope.zhi) {
if ($scope.zhi[index].id==id) {
$scope.zhi[index].tai="已发货"
}
}
}
$scope.quanxuan=false;
$scope.qx=function(){
for (index in $scope.zhi) {
$scope.zhi[index].ck=$scope.quanxuan;
}
}
//删除
$scope.delAll=function(id){
for (index in $scope.zhi) {
if ($scope.zhi[index].id==id) {
$scope.zhi.splice(index,1)
}
}
}
//批量删除
$scope.pl=function(){
var arr=[];
for (index in $scope.zhi) {
if ($scope.zhi[index].ck==true) {
arr.push($scope.zhi[index]);
}
}
if(arr.length<=0){
alert("请选择")
}else{
for (a in arr) {
for (index1 in $scope.zhi) {
if (arr[a]==$scope.zhi[index1]) {
$scope.zhi.splice(index1,1)
}
}
}
}
}
//批量发货
$scope.pf=function(){
for (index in $scope.zhi) {
if ($scope.zhi[index].ck==true) {
$scope.zhi[index].tai="已发货"
}
}
}
//
$scope.isshow=false;
$scope.add=function(){
$scope.kong=[];
var aa=/米/g;
var newshopname=$scope.newshopname;
var newname=$scope.newname;
var newhao=$scope.newhao;
var newprice=$scope.newprice;
var newcity=$scope.newcity;
var id=0;
for (index in $scope.zhi) {
if ($scope.zhi[index].id>id) {
id=$scope.zhi[index].id
}
}
var newid =id+1;
if (newshopname=="" || newshopname==null) {
$scope.kong.push("商品名不能为空")
}
if (newname=="" || newname==null) {
$scope.kong.push("用户名不能为空")
}
if (newhao=="" || newhao==null) {
$scope.kong.push("手机号不能为空")
}
if (newprice=="" || newprice==null) {
$scope.kong.push("价格不能为空")
}
if (newcity=="" || newcity==null) {
$scope.kong.push("城市不能为空")
}
if ($scope.kong.length==0) {
4000
$scope.zhi.push({
ck:false,
id:newid,
shopname:newshopname.replace(aa,"*"),
name:newname,
hao:newhao,
price:newprice,
city:newcity,
times:new Date(),
tai:"未发货"
})
$scope.newshopname="";
$scope.newname="";
$scope.newhao="";
$scope.newprice="";
$scope.newcity="";
$scope.isshow=false;
} else{
}
}
$scope.All1=function(t){
var m = t.getMonth() + 1;
var ks=$scope.ks;
var js=$scope.js;
if (ks==undefined || ks=="") {
ks=1;
};
if (js==undefined || js=="") {
js=12;
};
if(m>=ks && m<=js){
return true;
};
}
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<center>
<input type="text" placeholder="用户名搜索" ng-model="cname"/>
<input type="text" placeholder="手机号搜索" ng-model="chao"/>
<select ng-model="ci">
<option value="">选择城市</option>
<option>北京</option>
<option>魏县</option>
<option>广平</option>
<option>上海</option>
</select>
<select ng-model="ta">
<option value="">选择状态</option>
<option>未发货</option>
<option>已发货</option>
</select>
<button ng-click="pl()">批量删除</button>
<button ng-click="pf()">批量发货</button>
<button ng-click="isshow=true">入库</button><br />
<select ng-model="ks">
<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>
<select ng-model="js">
<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>
<table border="1" cellspacing="0" width="800px">
<thead>
<th><input type="checkbox" ng-click="qx()" ng-model="quanxuan"></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>操作</th>
</thead>
<tbody>
<tr ng-repeat="z in zhi | filter:{name:cname} | filter:{hao:chao} | filter:{city:ci} | filter:{tai:ta}" ng-show="All1(z.times)">
<td><input type="checkbox" ng-model="z.ck"></td>
<td>{{z.id}}</td>
<td>{{z.shopname}}</td>
<td>{{z.name}}</td>
<td>{{z.hao}}</td>
<td>{{z.price | currency:"￥"}}</td>
<td>{{z.city}}</td>
<td>{{z.times| date:"yyyy-MM-dd HH:mm:ss"}}</td>
<td>
<span ng-show="z.tai=='未发货'" ng-click="zhuang(z.id)">
<a href="javascript: void(0);">{{z.tai}}</a>
</span>
<span ng-show="z.tai=='已发货'">已发货</span>
</td>
<td>
<button ng-click="delAll(z.id)">删除</button>
</td>
</tr>
</tbody>
</table>
<form ng-show="isshow">
<input type="text" placeholder="请输入商品名" ng-model="newshopname"/><br /><br />
<input type="text" placeholder="请输入用户名" ng-model="newname"/><br /><br />
<input type="text" placeholder="请输入手机号" ng-model="newhao"/><br /><br />
<input type="number" placeholder="请输入价格" ng-model="newprice"/><br /><br />
<select ng-model="newcity">
<option value="">选择城市</option>
<option>北京</option>
<option>魏县</option>
<option>广平</option>
<option>上海</option>
</select>
<button ng-click="add()">提交</button>
</form>
<ul>
<ol ng-repeat="k in kong">{{k}}</ol><br />
</ul>
</center>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJS商品新增订单批量发货删除排序全选反选日期过滤
- angularjs.js下的批量删除
- angularjs删除 发货 新增 排序等
- AngularJs实现批量删除的操作
- angularjs checkbox全选单选批量删除
- （angularjs） 数据的增删改查（添加用户，查询年龄，批量删除，全部删除，修改密码） 类似题
- 商品订单（增删改查）：新增订单；批量删除，发货；模糊查询，下拉菜单内容过滤（含时间）；全选反选，列名排序
- AngularJs实现删除批量删除
- AngularJS表格数据全选反选批量删除,删除的数据添加到数组里
- 订单用户表1（用户查询 、手机号查询 、选择城市 、选择状态、月份查询 、ID排序 、添加数据、批量发货、批量删除）
- Angularjs 增删改查全选反选批量删除总价总数
- AngularJS表格数据全选反选,批量删除,借助计数器删除
- angularJS实现查询和批量删除与全部删除
- 商品增加和查询、排序、批量删除、批量发货
- AngularJS实现增加订单、批量发货
- angularjs简单使用批量删除
- AngularJS——批量删除
- AngularJs实现添加,批量删除,全选,反选等功能
- AngularJS购物车实现添加用户,修改用户,全选反选,批量删除
- 韩经哲月考1_angular增删改查批量删除发货