Angularjs 增删改查

最新推荐文章于 2018-09-24 19:00:07 发布

we1601r

最新推荐文章于 2018-09-24 19:00:07 发布

阅读量204

点赞数

文章标签： angularjs

本文链接：https://blog.csdn.net/we1601r/article/details/79102813

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<script src="js/angular.js"></script>
<script>
var app = angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.username = [{
ck:false,
id:1,
sname:"oppo R9sk",
name:"关羽",
shou:"12346578911",
price:4000,
cheng:"北京",
time: new Date(),
zhuang:"未发货"
},{
ck:false,
id:5,
sname:"vivo X20",
name:"张飞",
shou:"4564654654",
price:8000,
cheng:"上海",
time: new Date(),
zhuang:"未发货"
},{
ck:false,
id:4,
sname:"iPhone 8 Plus",
name:"刘备",
shou:"213123123113",
price:10000,
cheng:"广州",
time: new Date(),
zhuang:"未发货"
},{
ck:false,
id:2,
sname:"小米Mix2",
name:"曹操",
shou:"78978978978",
price:3200,
cheng:"深圳",
time: new Date(),
zhuang:"未发货"
}];
$scope.uname = "";
$scope.shou1 = "";
//全选
$scope.qx = function(){
for(var i in $scope.username){
$scope.username[i].ck=$scope.all;
}
};
//添加

$scope.save = function(){
//过滤星号
var reg_=/米/g;
var suname=$scope.add_sname.replace(reg_,"*");
console.log(suname,"++++")
a = {
ck:false,
id:$scope.add_id,
sname:suname,
name:$scope.add_name,
shou:$scope.add_shou,
price:$scope.add_price,
cheng:$scope.add_cheng,
time:new Date(),
zhuang:$scope.add_zhuang,
};

$scope.username.push(a);
$scope.add_id="",
$scope.add_sname="",
$scope.add_name="",
$scope.add_shou="",
$scope.add_price="",
$scope.add_cheng="",
$scope.add_zhuang="",
$scope.isshow=false;

}
//月份
$scope.yuefen = [1,2,3,4,5,6,7,8,9,10,11,12];
$scope.yues = function(m){
var currentd = m.getMonth()+1;

//获取开始月份
var start = $scope.yue;
//获取结束月份
var end = $scope.fen;
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;
}
//批量发货
$scope.fa = function(){
for(var i=0;i<$scope.username.length;i++){
if($scope.username[i].ck){
$scope.username[i].zhuang='已发货';

}
}
}
//删除
$scope.shanchu = function(){

for(var i=0;i<$scope.username.length;i++){
if($scope.username[i].ck){
$scope.username.splice(i,1);
i--;
}
}
}
//
$scope.xx = function(dates){
var ss = dates.getMonth()+1;
var f1 = $scope.yue;
var f2 = $scope.fen;

if(f1==undefined || f1==""){
f1=1;
}

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

if(ss>=f1 && ss<f2){
return true;
}else{
return false;
}

}
//单删
$scope.dele=function(clumn){
for(index in $scope.username){
if($scope.username[index].id==clumn){
$scope.username.splice(index,1);
}
}
}
});

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

thead th {
background: deepskyblue;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<input placeholder="用户名搜索" ng-model="uname"/>
<input placeholder="手机号搜索"ng-model="shou1" />
<select ng-model="xuan">
<option value="">选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<select ng-model="szhuang">
<option value="">选择状态</option>
<option>已发货</option>
<option>未发货</option>
</select>
<select ng-model="yue">
<option value="">开始月份</option>
<option ng-repeat="y in yuefen">{{y}}</option>

</select>
.
<select ng-model="fen">
<option value="">结束月份</option>
<option ng-repeat="f in yuefen">{{f}}</option>

</select>
<select ng-model="pai">
<option value="">ID排序</option>
<option value="id">升序</option>
<option value="-id">降序</option>
</select>
<br />
<button style="background-color: green;" ng-click="isshow=true">新怎订单</button>
<button style="background-color: green;" ng-click="fa()">批量发货</button>
<button style="background-color: red;" ng-click="shanchu()">批量删除</button>
<table border="1px" cellpadding="10" cellspacing="1">
<tr>
<th><input type="checkbox" ng-model="all" ng-click="qx()"/></th>
<th>ID</th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格</th>
<th>城市</th>
<th>下单时间</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr ng-repeat="s in username | filter:{name:uname} | filter:{shou:shou1} | orderBy:pai | filter:{cheng:xuan} | filter:{zhuang:szhuang}" ng-show="xx(s.time)">
<td><input type="checkbox" ng-model="s.ck"/></td>
<td>{{s.id}}</td>
<td>{{s.sname}}</td>
<td><span ng-hide="xuigai">{{s.name}}</span><span ng-show="xuigai"><input type="text" ng-model="s.name"/><button ng-click="xuigai=false">保存</button></span></td>
<td>{{s.shou}}</td>
<td>{{s.price | currency:"￥"}}</td>
<td>{{s.cheng}}</td>
<td>{{s.time | date:"MM-hh:mm:ss"}}</td>
<td>
<span ng-if="s.zhuang=='未发货'">
<a href="#" ng-click="s.zhuang='已发货'">{{s.zhuang}}</a>
</span>
<span ng-if="s.zhuang=='已发货'">
已发货
</span>
</td>
<td><button ng-click="xuigai=true">修改</button><button ng-click="dele(s.id)">删除</button></td>
</tr>
</table>

<div id="add" ng-show="isshow">
<input placeholder="输入ID" ng-model="add_id"/>
<br />
<input placeholder="输入商品名" ng-model="add_sname"/>
<br />
<input placeholder="输入用户名" ng-model="add_name"/>
<br />
<input placeholder="输入手机号" ng-model="add_shou"/>
<br />
<input placeholder="输入价格" ng-model="add_price"/>
<br />
<input placeholder="输入城市" ng-model="add_cheng"/>
<br />
<input placeholder="输入状态" ng-model="add_zhuang"/>
<br />
<button ng-click="save()">保存</button>
</div>
</body>
</html>