Angular实现较为复杂的表格过滤,删除功能示例


Posted in Javascript onDecember 23, 2017

本文实例讲述了Angular实现较为复杂的表格过滤,删除功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

Angular实现较为复杂的表格过滤,删除功能示例

具体代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3water.com Angular过滤、删除</title>
    <style>
      table{
        border: 1px solid black;
        width: 800px;
      }
      td , th{
        border: 1px solid black;
        text-align: center;
      }
      th{
        background: #767674;
      }
      .d1{
        width: 50%;
        margin: 0 auto;
      }
      .d2{
        margin-top: 10px;
      }
      .btn{
        background: green;
        color: white;
      }
      .btn1{
        background: red;
        color: white;
      }
      tr:nth-child(2n){
        background-color: gainsboro;
      }
    </style>
    <script src="angular.min.js"></script>
    <script type="text/javascript" src="jquery-1.9.1.min.js" ></script>
    <script>
      angular.module("MyApp",[])
      .controller("democ",function($scope,$filter){
        $scope.isc = false;
        $scope.arrs = [{
                checked:false,
                id:7,
                name:"OPPO R9s",
                user:"赵云",
                tel:15777777777,
                price:4999,
                city:"北京",
                time:new Date('03-09 10:00'),
                sta:"已发货"
               },
               {
                checked:false,
                id:12,
                name:"VIVO X20",
                user:"关羽",
                tel:15333333333,
                price:2998,
                city:"上海",
                time:new Date('08-22 10:00'),
                sta:"已发货"
               },
               {
                checked:false,
                id:1,
                name:"iPhone 8 Plus",
                user:"曹操",
                tel:15111111111,
                price:7588,
                city:"北京",
                time:new Date('09-04 10:00'),
                sta:"已发货"
               },
               {
                checked:false,
                id:11,
                name:"小*Note5",
                user:"黄忠",
                tel:13222222222,
                price:699,
                city:"重庆",
                time:new Date('02-28 10:00'),
                sta:"发货"
               },
               {
                checked:false,
                id:1,
                name:"小*Mix2",
                user:"黄盖",
                tel:13111111111,
                price:3299,
                city:"北京",
                time:new Date('03-015 10:00'),
                sta:"发货"
               }];
               $scope.arr = $scope.arrs;
               $scope.seluser = function(){
                 $scope.arr = [];
                 var val = $scope.reg_user;
                 var f = $filter("filter");
                 $scope.arr = f($scope.arrs,{"user":val});
               }
               $scope.seltel = function(){
                 $scope.arr = [];
                 var val = $scope.reg_tel;
                 var f = $filter("filter");
                 $scope.arr = f($scope.arrs,{"tel":val});
               }
               $scope.selsta = function(){
                $scope.arr = [];
                var val = $scope.reg_sta;
                var f = $filter("filter");
                $scope.arr = f($scope.arrs,{"sta":val});
               }
               $scope.ckAll = function(){
                var ck = $scope.sta_ck;
                for(var i=0; i<$scope.arrs.length; i++){
                  $scope.arrs[i].checked = ck;
                }
               }
               $scope.del = function(th){
                $scope.arrs.splice(th,1);
               }
               $scope.delAll = function(){
                for(var i=0; i<$scope.arrs.length; i++){
                  if($scope.arrs[i].checked==true){
                    $scope.arrs.splice(i,1);
                    i--;
                  }
                }
               }
               $scope.add = function(){
                var d=new Date();
                $scope.arrs.push({
                  checked:false,
                  id:$scope.a_id,
                  name:$scope.a_name,
                  user:$scope.a_user,
                  tel:$scope.a_tel,
                  price:$scope.a_price,
                  city:$scope.a_city,
                  time:d,
                  sta:"发货"
                });
                $scope.arr = $scope.arrs;
                $scope.isc = false;
               }
      });
    </script>
  </head>
<body ng-app="MyApp" ng-controller="democ">
    <div class="d1">
      <div>
        <input type="text" placeholder="用户名搜索" ng-change="seluser()" ng-model="reg_user"/>
        <input type="text" placeholder="手机号搜索" ng-change="seltel()" ng-model="reg_tel"/>
        <select>
          <option>选择城市</option>
          <option>北京</option>
          <option>上海</option>
          <option>广州</option>
        </select>
        <select ng-change="selsta()" ng-model="reg_sta">
          <option value="">选择状态</option>
          <option value="发货">发货</option>
          <option value="已发货">已发货</option>
        </select>
        <select ng-model="selid">
          <option value="">--请选择--</option>
          <option value="id">ID正序</option>
          <option value="-id">ID倒叙</option>
        </select>
        <select ng-model="selmonth">
          <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 ng-model="lastmonth">
          <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>
      </div>
      <div class="d2">
        <input type="button" value="新增订单" class="btn" ng-click="isc=true"/>
        <input type="button" value="批量发货" class="btn"/>
        <input type="button" value="批量删除" class="btn1" ng-click="delAll()"/>
        敏感词:米(商品名)->替换成*
      </div>
      <div>
        <table cellpadding="0" cellspacing="0">
          <tr>
            <th><input type="checkbox" ng-change="ckAll()" ng-model="sta_ck"/></th>
            <th>ID</th>
            <th>商品名</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>价格</th>
            <th>城市</th>
            <th>下单时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
          <tr ng-repeat="a in arr|orderBy : selid | filter:{time:selmonth} | filter:{time:lastmonth}">
            <td><input type="checkbox" ng-model="a.checked"/></td>
            <td>{{a.id}}</td>
            <td>{{a.name}}</td>
            <td>{{a.user}}</td>
            <td>{{a.tel}}</td>
            <td>{{a.price|currency : '¥'}}</td>
            <td>{{a.city}}</td>
            <td>{{a.time|date : 'MM-HH hh:dd:ss'}}</td>
            <td>
              <span ng-show="a.sta=='已发货'">{{a.sta}}</span>
              <span ng-show="a.sta=='发货'"><a href="#" rel="external nofollow" ng-click="a.sta='已发货'">{{a.sta}}</a></span>
            </td>
            <td><input type="button" value="删除" ng-click="del(this)"/></td>
          </tr>
        </table>
      </div>
      <div ng-show="isc">
           I D:<input type="text" ng-model="a_id"/><br />
           商品名:<input type="text" ng-model="a_name"/><br />
           用户名:<input type="text" ng-model="a_user"/><br />
           手机号:<input type="text" ng-model="a_tel"/><br />
           价 值:<input type="text" ng-model="a_price"/><br />
          城 市:<input type="text" ng-model="a_city"/><br />
          <input type="button" value="保存" ng-click="add()"/>
      </div>
    </div>
  </body>
</html>

PS:代码中尚有一些功能并不完善,感兴趣的朋友可以自行测试修改完善一下。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
js 模拟气泡屏保效果代码
Jul 10 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
javascript从作用域链谈闭包
Jul 29 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
详解Vue开发微信H5微信分享签名失败问题解决方案
Aug 09 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
vue-router 2.0 跳转之router.push()用法说明
Aug 12 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 #Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 #Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 #Javascript
原生JS写Ajax的请求函数功能
Dec 22 #Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 #Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 #Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 #Javascript
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
mysql 搜索之简单应用
2007/04/27 PHP
解决php使用异步调用获取数据时出现(错误c00ce56e导致此项操作无法完成)
2013/07/03 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
Smarty模板常见的简单应用分析
2016/11/15 PHP
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
javascript每日必学之继承
2016/02/23 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
微信小程序 获取当前地理位置和经纬度实例代码
2016/12/05 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
python更新列表的方法
2015/07/28 Python
Python中pygame安装方法图文详解
2015/11/11 Python
简单解决Python文件中文编码问题
2015/11/22 Python
Python快速排序算法实例分析
2017/11/29 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
详解python statistics模块及函数用法
2019/10/27 Python
[原创]赚疯了!转手立赚800+?大佬的python「抢茅台脚本」使用教程
2021/01/12 Python
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
对祖国的寄语大全
2014/04/11 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
市场营销工作计划书
2014/09/15 职场文书
毕业生个人总结
2015/02/28 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
创业计划书之美甲店
2019/09/20 职场文书