angularjs的简易购物代码

最新推荐文章于 2022-04-20 23:21:31 发布

s秋天

最新推荐文章于 2022-04-20 23:21:31 发布

阅读量266

点赞数

本文链接：https://blog.csdn.net/changten/article/details/78596487

版权

<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(function(){
$("tbody tr:odd").css("background-color","darkgray");
$("tbody tr:even").css("background-color","lightgray");
})

</script>
<script>
angular.module("myapp",[])
.controller("ct",function($scope){
$scope.datas=[
{"id":1,"name":"小米20","tel":18566852223,"aut":"关羽","price":2365,"city":"北京","time":"55585622632","check":false,'huo':'发货' },
{"id":3,"name":"iphone8","tel":155546523,"aut":"张飞","price":2365,"city":"太原","time":"9252265632","check":false ,'huo':'发货'},
{"id":4,"name":"小米20","tel":13566852223,"aut":"刘备","price":1552,"city":"北京","time":"8562232632","check":false ,'huo':'发货'},
{"id":5,"name":"魅蓝","tel":1506655223,"aut":"孙权","price":5365,"city":"河北","time":"59562232632","check":false ,'huo':'发货' },
{"id":2,"name":"vivo","tel":1355466853,"aut":"子龙","price":9365,"city":"河南","time":"2553622632","check":false,'huo':'发货' }
];
$scope.zshow=false;
//删除
$scope.del=function(index){

for(var i=0;i<$scope.datas.length;i++)
{
if($scope.datas[i].id==index)
{
if(confirm("确定要"+$scope.datas[i].name+"删除吗？")){
$scope.datas.splice(i,1);
}
}
}

}
//修改
$scope.xiu=function(x){
$scope.isshow=true;
$scope.de=x;
}
$scope.gainame="";
$scope.gaicity="";
$scope.ti=function(){

for(var i=0;i<$scope.datas.length;i++)
{
if($scope.datas[i].id==$scope.de)
{
$scope.datas[i].name=$scope.gainame;
$scope.datas[i].city=$scope.gaicity;

$scope.isshow=false;
}
}

}
//批量删除
$scope.delpi=function(){

for(var i=0;i<$scope.datas.length;i++)
{
if($scope.datas[i].check==true)
{
$scope.datas.splice(i,1)
i--;
}
}

}

//批量发货
$scope.fahuo=function(){
for(var i=0;i<$scope.datas.length;i++)
{
if($scope.datas[i].check==true)
{
$scope.datas[i].huo="已发货";

}
}
}

$scope.lianjie=function(x){
for(var i=0;i<$scope.datas.length;i++)
{
if($scope.datas[i].id==x)
{
$scope.datas[i].huo="已发货";
}
}
}
//添加数据
$scope.add=function(){
$scope.zshow=true;

}
$scope.addid="";
$scope.addname="";
$scope.addna="";
$scope.addtel="";
$scope.addprice="";
$scope.addcity="";
$scope.addtime="";
$scope.addzt="";
$scope.addall=function(){
/*{"id":2,"name":"vivo","tel":1355466853,"aut":"子龙","price":9365,"city":"河南","time":"2553622632","check":false,'huo':'发货' }*/
$scope.datas.push({
id:$scope.addid,
name:$scope.addname,
tel:$scope.addtel,
aut:$scope.addna,
price:$scope.addprice,
city:$scope.addcity,
time:$scope.addtime,
check:false,
huo:'发货'

});

$scope.zshow=false;
}
})
.filter("demof",function(){
return function(input){
var newc=input.replace(/米/g,"*");
return newc;
};
})
</script>
</head>
<body ng-app="myapp" ng-controller="ct" >
<center>
<input placeholder="用户名搜索" ng-model="selname" />
<input placeholder="手机号搜索" ng-model="selphone" />
<select id="city" ng-model="delcity">
<option value="">选择城市</option>
<option>河北</option>
<option>太原</option>
<option>北京</option>
<option>河南</option>
</select>
<select id="zhuangtai" ng-model="delzhuangtai">
<option value="">选择状态</option>
<option>发货</option>
<option>已发货</option>
</select>
<select id="kaishi">
<option>开始月份</option>
</select>
<select id="jieshu">
<option>结束月份</option>
</select>
<select ng-model="selordby">
<option value="">请选择</option>
<option value="id">ID正序排序</option>
<option value="-id">ID到序排序</option>
</select>

<br />

<input type="button" ng-click="add()" value="新增订单" style="background-color: green;" />
<input type="button" ng-click="fahuo()" value="批量发货" style="background-color: green;" />
<input type="button" ng-click="delpi()" value="批量删除" style="background-color: green;" />
敏感字:米(商品名)->替换成*
<br />
<table border="1px" style="width: 800px;" >
<thead>
<tr>
<th><input type="checkbox" name="ck"/></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="s in datas|filter:{'name':selname,'tel':selphone,'city':delcity,'huo':delzhuangtai}|orderBy:selordby">
<th><input type="checkbox" ng-model="s.check" /></th>
<th>{{s.id}}</th>
<th>{{s.name|demof}}</th>
<th>{{s.aut}}</th>
<th>{{s.tel}}</th>
<th>{{s.price}}</th>
<th>{{s.city}}</th>
<th>{{s.time|date:'yyyy年MM月dd日 hh:mm:ss'}}</th>
<th><a ng-click="lianjie(s.id)" >{{s.huo}}</a></th>
<th>
<button ng-click="xiu(s.id)">修改</button>
<button ng-click="del(s.id)">删除</button>
</th>
</tr>
</tbody>
</table>
<br />
<br />
<div ng-show="isshow">
商品<input ng-model="gainame" /><br />
城市<input ng-model="gaicity" /><br />
<input type="button" ng-click="ti()" value="提交" />
</div>
<div ng-show="zshow">
ID<input ng-model="addid" /><br />
商品名<input ng-model="addname" /><br />
用户名<input ng-model="addna" /><br />
手机号<input ng-model="addtel" /><br />
价格<input ng-model="addprice" /><br />
城市<input ng-model="addcity" /><br />
下单时间<input ng-model="addtime" /><br />
<button ng-click="addall()">提交</button>
</div>
</center>
</body>
</html>

s秋天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs的简易购物代码

$(function(){$("tbody tr:odd").css("background-color","darkgray"); $("tbody tr:even").css("background-color","lightgray");}) angular.module("myapp",[]).controller("ct",functio
复制链接

扫一扫