angularjs的简易购物代码
来源:互联网 发布:榕基软件千股千评 编辑:程序博客网 时间:2024/05/17 07:33
<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>
<!--{"id":1,"name":"小米20","tel":18566852223,"aut":"关羽","price":2365,"city":"北京","time":"55585622632"},-->
<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>
<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>
<!--{"id":1,"name":"小米20","tel":18566852223,"aut":"关羽","price":2365,"city":"北京","time":"55585622632"},-->
<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>
阅读全文
0 0
- angularjs的简易购物代码
- ionis 和angularjs 购物车的代码
- AngularJS购物车代码
- AngularJs购物车代码。
- JSP-----------简易购物车代码
- 简易购物车---购物车的实现
- 简易购物车的实现
- C++ 购物车代码 简易版1.0
- AngularJs实现简易的计算器
- angularjs实现的购物车功能
- AngularJs实现简单的购物车
- angularjs之购物车的增改查1
- Angularjs实现简单的购物车
- AngularJs简单购物车的实现
- angularjs实现购物车的一些功能
- 基于Session的简易网上购物车
- 使用session对象的简易购物车
- php_实现一个简易的购物车
- mysql的基本设定
- java扫描文件夹下面的所有文件(递归与非递归实现)
- $(window).scrollTop()和$(document).scrollTop()区别
- struts标签使用示例
- 窗口
- angularjs的简易购物代码
- Linux部署tomcat+apache+java环境
- scikit-learn 中文文档-内核岭回归-监督学习|ApacheCN
- BZOJ 4510: [Usaco2016 Jan]Radio Contact dp
- android TV实现textview跑马灯效果
- web.xml 配置中classpath: 与classpath*:的区别
- let the bollom rise
- Fastjson
- 编写一个JFrame窗口,要求如下: 1. 在窗口的NORTH区放置一个JPanel面板。 2. JPanel面板放置如下组件: (1) JLable标签,标签文本为“兴趣”,右边接着是三个JChec