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 相关文章推荐
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
webpack入门必知必会
Jan 16 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
json前后端数据交互相关代码
Sep 19 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 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
DSP接收机前端设想
2021/03/02 无线电
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP 单引号与双引号的区别
2009/11/24 PHP
PHP重定向的3种方式
2013/03/07 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php实现留言板功能(会话控制)
2017/05/23 PHP
Javascript 二维数组
2009/11/26 Javascript
Javascript 面向对象 命名空间
2010/05/13 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
js判断鼠标同时离开两个div的思路及代码
2013/05/31 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
2013/06/05 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
python nmap实现端口扫描器教程
2020/05/28 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
应聘自荐书
2013/10/08 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
大家访活动实施方案
2014/03/10 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
员工安全承诺书
2014/05/22 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
房屋买卖协议样本
2014/11/16 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL
Mysql数据库group by原理详解
2022/07/07 MySQL
Python实现数据的序列化操作详解
2022/07/07 Python