angularJS增删改查

最新推荐文章于 2021-01-26 15:13:23 发布

大哥111111

最新推荐文章于 2021-01-26 15:13:23 发布

阅读量145

点赞数

分类专栏：代码文章标签：可以

本文链接：https://blog.csdn.net/qq_41636756/article/details/79070767

版权

代码专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tr:nth-child(even){
background-color: darkgray;
}
tr:nth-child(odd){
background-color: bisque;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app=angular.module("myapp",[]);
app.controller("mycon",function($scope){
$scope.isShow=false;
//定义数组
$scope.zhang=[
{id:7,
usname:"OppO R9sk",
name:"关羽",
shouji:"15777777777",
jiage:4999,
chengshi:"北京",
xiadan:"03-09 10:00",
tai:"已发货",
a:false
},
{id:4,
usname:"VIVO X20",
name:"赵云",
shouji:"1333333333",
jiage:2998,
chengshi:"上海",
xiadan:new Date(),
tai:"已发货",
a:false
},
{id:2,
usname:"iphone 8 Plus",
name:"曹操",
shouji:"1511111111",
jiage:7588,
chengshi:"北京",
xiadan:new Date(),
tai:"未发货",
a:false
},
{id:6,
usname:"iphone 7 Plus",
name:"貂蝉",
shouji:"1811111111",
jiage:7588,
chengshi:"北京",
xiadan:new Date(),
tai:"未发货",
a:false

}

]
//添加方法
$scope.add=function(){
//关键字
var e=/米/g;
var sname=$scope.jia1.replace(e,"*");
var s={
id:$scope.jia,
usname:sname,
name:$scope.jia2,
shouji:$scope.jia3,
jiage:$scope.jia4,
chengshi:$scope.jia5,
xiadan:new Date(),
tai:"没发货"

}
$scope.zhang.push(s);
$scope.isShow=false;
}
//删除方法
$scope.shan=function($index){
$scope.zhang.splice($index,1)
}
//全选
$scope.qx=false;
$scope.quanxuan = function(){
if($scope.qx==true){
for (var i = 0; i < $scope.zhang.length; i++) {
$scope.zhang[i].a=true;
}
}else{
for (var i = 0; i < $scope.zhang.length; i++) {
$scope.zhang[i].a=false;
}
}
}//全删
$scope.quanshan=function(){
for (var i = 0; i < $scope.zhang.length; i++) {
if($scope.zhang[i].a==true){
$scope.zhang.splice(i,1);
i--;
}
}
}

})
</script>
</head>
<body ng-app="myapp" ng-controller="mycon">
<center>
<input type="text" placeholder="按用户名搜索" ng-model="ming"/>
<input type="text" placeholder="手机号搜索" ng-model="shou"/>


<select ng-model="diming">
<option value="">请选择</option>
<option>北京</option>
<option>上海</option>
<option>重庆</option>


</select>
<select ng-model="fasong">
<option value="">请选择</option>s
<option>已发货</option>
<option>未发货</option>
</select>
<select>

<option>开始月份</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>
<option>结束月份</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="pai">

<option value="">id排序</option>
<option value="id">正序</option>
<option value="-id">降序</option>
</select><br />

<button ng-click="isShow=true">新增订单</button>
<button>批量发货</button>

<button ng-click="quanshan()">批量删除</button>敏感字：米。替换成*。
<table width="60%" border="1" >
<tr>
<th><input type="checkbox" ng-model="qx" ng-click="quanxuan()"/></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr ng-repeat="pro in zhang | filter:{name:ming} | filter:{shouji:shou} |filter:{chengshi:diming} | orderBy:pai | filter:{tai:fasong}" align="center">
<td><input type="checkbox" ng-model="pro.a"></td>
<td>{{pro.id}}</td>
<td>{{pro.usname}}</td>
<td><span ng-hide="xiu">{{pro.name}}</span>
<span ng-show="xiu"><input type="text" ng-model="pro.name"/>
<button ng-click="xiu=false">保存</button></span>
</td>
<td>{{pro.shouji}}</td>
<td>{{pro.jiage}}</td>
<td>{{pro.chengshi}}</td>
<td>{{pro.xiadan}}</td>
<td>
<span ng-if="pro.tai=='已发货'">已发货</span>
<span ng-if="pro.tai=='未发货'">
<a href="#" ng-click="pro.tai='已发货'">未发货</a>
</span>
</td>
<td><a href="#" ng-click="xiu=true">修改</a>   <a href="#" ng-click="shan(index)">删除</a></td>

</tr>
</table>
<div ng-show="isShow">
<input placeholder="请输入ID" type="text" ng-model="jia"/>
<input placeholder="请输入商品名" type="text" ng-model="jia1"/>
<input placeholder="请输入姓名" type="text" ng-model="jia2"/>
<input placeholder="请输入手机号" type="text" ng-model="jia3"/>
<input placeholder="请输入价格" type="text" ng-model="jia4"/>
<input placeholder="请输入城市" type="text" ng-model="jia5"/>

<button ng-click="add()">保存</button>
</div>
</center>
</body>
</html>