angular js实现增删改查demo(全)
来源：互联网 发布：哪里买淘宝小号 编辑：程序博客网 时间：2024/06/07 06:16
逻辑
//moduleangular.module("myApp",[]).controller("demoC",function($scope){});//模拟数据 只显示一条节约空间...$scope.datas = [{ state:false, id:7, goodsname:"OPPO R9sk", username:"关羽", tel:15777777777, price:4999, city:"北京", data:new Date("03-09 10:00"), status:"已发货" }];敏感词汇 在往表格里添加时判断一下
for(var i = 0; i < $scope.datas.length; i++){if($scope.datas[i].goodsname.indexOf("米") != -1){$scope.datas[i].goodsname$scope.datas[i].goodsname.replace("米","*"); }} 全选
$scope.ckAll = function(){var v = $scope.ckall;for(var i = 0; i < $scope.datas.length; i++){ $scope.datas[i].state = v; }}删除(批量删除/单行删除)
$scope.del = function(index){ $scope.datas.splice(index,1);}$scope.delAll = function(){ var plsc = []; for(var i = 0; i < $scope.datas.length; i++){ if($scope.datas[i].state){ $scope.datas.splice(i,1); plsc.push($scope.datas[i].state); i--; } } //如果没有选择 弹窗提示 if(plsc.length == 0){ alert("请选择要删除的数据"); }}全部发货
$scope.statusAll = function(){ var plsc = []; for(var i = 0; i < $scope.datas.length; i++){ if($scope.datas[i].state){ if($scope.datas[i].status == "未发货"){ plsc.push($scope.datas[i].status); $scope.datas[i].status = "已发货" }else{ plsc.push($scope.datas[i].status); } } } if(plsc.length == 0){ alert("请选择要发货的数据"); }}月份查询
$scope.month = function(m){ var v = m.getMonth() + 1; if ($scope.begin <= v && v <=$scope.finish) { return true; } else if($scope.begin == undefined || $scope.begin == "" || $scope.finish == undefined || $scope.finish == ""){ return true; } else { return false; }}添加
$scope.flag = false;$scope.fl = false;$scope.add = function(){ $scope.pd = []; if($scope.newid == undefined || $scope.newid == ""){ $scope.pd.push("ID不能为空"); } if($scope.newgoodsname == undefined || $scope.newgoodsname == ""){ $scope.pd.push("商品名不能为空"); } if($scope.newusername == undefined || $scope.newusername == ""){ $scope.pd.push("用户名不能为空"); } if($scope.pd.length == 0){ $scope.flag = false; $scope.datas.push({ state:false, id:$scope.newid, goodsname:$scope.newgoodsname, username:$scope.newusername, tel:$scope.newtel, price:$scope.newprice, city:$scope.newcity, data:new Date(), status:"未发货" }); //添加时再次判断敏感词 for(var i = 0; i < $scope.datas.length; i++){ if($scope.datas[i].goodsname.indexOf("米") != -1){ $scope.datas[i].goodsname = $scope.datas[i].goodsname.replace("米","*"); } } }else{ alert("不能为空");} style样式
<style type="text/css"> *{ margin: 0px; padding: 0px; box-sizing: border-box; } .box{ width: 1000px; height: 600px; margin: 20px auto; } .box .ss{ width: 140px; height: 20px; border-radius: 3px; border: 1px solid #c9c9c7; margin-bottom: 10px; } .box .xz{ width: 138px; height: 21px; margin-bottom: 10px; } .box .an{ width: 67px; height: 22px; background: #006d00; border-radius: 3px; border: 1px solid #165a21; color: #FFFFFF; } .box .bg{ width: 100%; margin-top: 10px; text-align: center; } .box .bg tr th{ background: #777775; } .box .bg tr:nth-child(2n) td{ background: #eeeeee; } .box .fr input{ margin-bottom: 10px; } </style>布局
<body ng-app="myApp" ng-controller="demoC"> <div class="box"> <input type="text" placeholder="用户名搜索" class="ss" ng-model="usernamess" /> <input type="tel" placeholder="手机号搜索" class="ss" ng-model="telss" /> <select class="xz" ng-model="xzcity"> <option value="">--请选择城市--</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="重庆">重庆</option> <option value="天津">天津</option> <option value="河南">河南</option> </select> <select class="xz" ng-model="xzstatus"> <option value="">--请选择状态--</option> <option value="已发货">已发货</option> <option value="未发货">未发货</option> </select> <select class="xz" ng-model="begin"> <option value="">开始月份</option> <option value="1">1月份</option> <option value="2">2月份</option> <option value="3">3月份</option> <option value="4">4月份</option> <option value="5">5月份</option> <option value="6">6月份</option> <option value="7">7月份</option> <option value="8">8月份</option> <option value="9">9月份</option> <option value="10">10月份</option> <option value="11">11月份</option> <option value="12">12月份</option> </select> <select class="xz" ng-model="finish"> <option value="">结束月份</option> <option value="1">1月份</option> <option value="2">2月份</option> <option value="3">3月份</option> <option value="4">4月份</option> <option value="5">5月份</option> <option value="6">6月份</option> <option value="7">7月份</option> <option value="8">8月份</option> <option value="9">9月份</option> <option value="10">10月份</option> <option value="11">11月份</option> <option value="12">12月份</option> </select> <select class="xz" ng-model="px"> <option value="">--请选择排序方式--</option> <option value="id">ID排序</option> <option value="price">价格排序</option> <option value="data">时间排序</option> </select> <input type="button" value="新增订单" class="an" ng-click="flag = !flag" /> <input type="button" value="批量发货" class="an" ng-click="statusAll()" /> <input type="button" value="批量删除" class="an" style="background: #e91600;" ng-click="delAll()" /> <span style="font-size: 14px;">敏感字 : 米(商品名) -> 替换成 *</span> <table border="1" cellspacing="0" cellpadding="0" class="bg"> <tr> <th><input type="checkbox" ng-model="ckall" ng-click="ckAll()"></th> <th>ID</th> <th>商品名</th> <th>用户名</th> <th>手机号</th> <th>价格</th> <th>城市</th> <th>下单时间</th> <th>状态</th> <th>操作</th> </tr> <tr ng-repeat="b in datas | filter : {username : usernamess} | filter : {tel : telss} | filter : {city : xzcity} | filter : {status : xzstatus} | orderBy : px" ng-show="month(b.data)"> <td><input type="checkbox" ng-model="b.state"></td> <td>{{b.id}}</td> <td>{{b.goodsname}}</td> <td> <span ng-show="!fl">{{b.username}}</span> <input type="text" ng-model="b.username" ng-show="fl" style="width: 80px; height: 20px;" /> </td> <td>{{b.tel}}</td> <td>{{b.price | currency : "￥"}}</td> <td>{{b.city}}</td> <td>{{b.data | date : "MM-dd hh:mm"}}</td> <td> <a href="" ng-show="b.status == '未发货'" ng-click="b.status = '已发货'"> 发货 </a> <span ng-show="b.status == '已发货'">{{b.status}}</span> </td> <td> <a href="#" ng-click="fl=true" ng-show="!fl">修改</a> <a href="#" ng-show="fl" ng-click="fl=false">保存</a> <a href="#" ng-click="del($index)">删除</a> </td> </tr> </table> <form style="width: 240px; margin: 20px auto; border: 1px solid #000000; text-align: center; padding-top: 20px; padding-bottom: 10px" ng-show="flag" class="fr"> <input type="text" placeholder="请输入id" ng-model="newid" /> <input type="text" placeholder="请输入商品名" ng-model="newgoodsname" /> <input type="text" placeholder="请输入用户名" ng-model="newusername" /> <input type="text" placeholder="请输入手机号" ng-model="newtel" /> <input type="text" placeholder="请输入价格" ng-model="newprice" /> <input type="text" placeholder="请输入城市" ng-model="newcity" /><br /> <input type="button" value="保存" ng-click="add()" /> </form> </div></body>本贴为铁柱儿学习angular js时记下的笔记,用以记忆.
阅读全文
0 0
- angular js实现增删改查demo(全)
- angular JS 实现增删改查
- angular实现增删改查
- angular.js 表格增删改查
- angular.js 增删改查练习1
- angular Js的增删改查
- angular.js 增删改查练习2
- Angular实现的增删改查
- angular增删查改
- Angular增删查改
- Angular增删改查
- angular 增删改查
- angular 增删改查
- JS实现增删改查
- js实现增删改查
- angular之增删改查
- Angular增删改查练习
- Angular js 开发系统之增删查改
- 深入解析Linux 常用命令--rm
- cvSnakeImage()函数代码升级，从C接口到C++接口：snakeImage()
- 纸牌三角形问题
- ArcGIS API for Javascript3.23加载百度地图
- 自定义echarts的toolbox事件
- angular js实现增删改查demo(全)
- 1126. Eulerian Path (25)
- 关于angularJs增删
- 使用IjkMediaPlayer结合surfaceView播放视频,自己写的播放和暂停按钮（四）
- bzoj1143: [CTSC2008]祭祀river 二分图匹配
- A+B Problem (II) : Input/Output Practice
- MAVEN项目使用log4j配置输出日志
- （LaTex)CTex的初次使用心得及入门教程
- bzoj 3809: Gty的二逼妹子序列
