首页 / ANGULAR / 使用Angular如何实现表格过滤

使用Angular如何实现表格过滤

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用Angular如何实现表格过滤，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5673字，纯文字阅读大概需要9分钟。

内容图文

这篇文章主要介绍了Angular实现较为复杂的表格过滤，删除功能,结合实例形式分析了AngularJS针对表格的排序、查询匹配、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下

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

先来看看运行效果：

使用Angular如何实现表格过滤 - 文章图片

具体代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>www.gxlcms.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">
    <p class="d1">
      <p>
        <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>
      </p>
      <p 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()"/>
        敏感词:米(商品名)->替换成*
      </p>
      <p>
        <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>
      </p>
      <p 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()"/>
      </p>
    </p>
  </body>
</html>

以上就是我整理的文字，希望对大家有帮助

在VueRouter中如何使用导航守卫用法

如何使用zTree树形菜单

在Vue.js中如何实现可折叠的树形菜单

以上就是使用Angular如何实现表格过滤的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的使用Angular如何实现表格过滤全部内容，希望文章能够帮你解决使用Angular如何实现表格过滤所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/286659.html

来源：【匿名】

【上一篇】AngularCLI+Angular5实战项目演示【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【使用Angular如何实现表格过滤】教程文章相关的互联网学习教程文章

AngularJS 表格【代码】

ng-repeat 指令可以完美的显示表格。在表格中显示数据使用 angular 显示表格是非常简单的：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="customersCtrl"> <table><tr ng-repeat="x in names"><td>{{ x.Name }}</td><td>{{ x.Country }}</td></tr> </table></div><script> var ap...

Angular表格神器“ui-grid”的应用【代码】【图】

HTML: （代码仅用于解释得更清楚，并未完全展示）<!doctype html><html ng-app="app"><head><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script><script src="http://ui-grid.info/docs/...

angular实现表格的全选、单选、部分删除以及全部删除【代码】

昨天自己写了一小段js，在全选的时候有点儿小坑，然后，整理了一下。今天把它贴出来，希望以后还记得。大家也可以去github上查看或下载：https://github.com/dreamITGirl/projectStudy/tree/master/html 我在用angular实现表格的全选时，是给了一个标记--就是一个空数组，每次有个别项选中，我都会push一个数字，当有选项从选中状态到未选中变化时，我就让该数组弹出一个数字。这样就可以实现了。我实现的个...

AngularJS 与Bootstrap实现表格分页实例代码【图】

AngularJS 从开始发布到现在使用的开发的者越来越多，也表明大多数做前端的朋友在往这边转，毕竟是Google 公司出品的产品啊，所以最近自己也在学习这部分知识。 AngularJS Bootstrap实现表格分页：最近一直学习Angular.js，在学习过程中也练习了很多的Demo，这里先贴一下表格+分页。先上图看看最终结果：不得不说Angular.js代码风格很受人欢迎，几十行代码清晰简洁的实现了上面的功能。首先表格的数据源来自于，Server.js 点...

AngularJS表格如何导出添加信息？几分钟告诉你关于angularjs表格导出消息的过程【图】

本篇文章主要的额讲述了关于angularjs表格导出添加额外信息的问题，本文章里面包括了angularjs表格导出信息的全过程，希望对大家有用，现在我们一起来看这篇文章吧原指令原导出Excel指令，AngularJS 导出Excel指令。这是用户的需求，单位申请检定器具，可以申请一次检定多个器具，技术机构的人员拿到的打印表格去联系部门检定，所以表格中应该是有器具的表格信息，同时还有申请单位、联系电话等信息。刚阅读完官方文档，在不影响原...

使用angularJsng-repeat如何做表格合并行效果，这里有ng-reapt做表格合并的实例【图】

本篇文章主要的讲解了angularjs 用ng-repeat做成表格合并的效果，这里有ng-repeat做成表格合并的实例，还不看过来。接下来我们一起来看这篇文章吧描述使用angularJs做出表格合并的效果后端返回的数据 [{"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"111","taskId":58,"fileId":72},{"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"111","taskId":58,"fileId":73},{"fil...

AngularJS表格导出添加额外信息【图】

这篇文章主要介绍了关于AngularJS 表格导出添加额外信息，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下原指令原导出Excel指令，AngularJS 导出Excel指令。这是用户的需求，单位申请检定器具，可以申请一次检定多个器具，技术机构的人员拿到的打印表格去联系部门检定，所以表格中应该是有器具的表格信息，同时还有申请单位、联系电话等信息。刚阅读完官方文档，在不影响原指令的使用情况下，我们可以去再设置一个...

使用angularJsng-repeat做表格合并行效果【图】

这篇文章主要介绍了关于使用angularJs ng-repeat做表格合并行效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下描述使用angularJs做出表格合并的效果后端返回的数据 [{"fileName":"111.pcap.00","startTime":"2018-06-05 10:16:04","taskName":"111","taskId":58,"fileId":72},{"fileName":"111.pcap.01","startTime":"2018-06-05 10:16:55","taskName":"111","taskId":58,"fileId":73},{"fileName":"aaa.p...

在Angular中如何实现table表格排序【图】

这篇文章主要介绍了Angular实现的table表格排序功能,结合完整实例形式分析了AngularJS表格排序所涉及的事件响应、元素遍历、属性修改等相关操作技巧,需要的朋友可以参考下本文实例讲述了Angular实现的table表格排序功能。分享给大家供大家参考，具体如下：先来看看效果图：完整代码如下：<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>www.gxlcms.com Angular表格排序</title><style>table{border: 1px solid;text-...

使用Angular如何实现表格过滤【图】

这篇文章主要介绍了Angular实现较为复杂的表格过滤，删除功能,结合实例形式分析了AngularJS针对表格的排序、查询匹配、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下本文实例讲述了Angular实现较为复杂的表格过滤，删除功能。分享给大家供大家参考，具体如下：先来看看运行效果：具体代码如下：<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>www.gxlcms.com Angular过滤、删除</title><style>table{bor...

在angularJs中如何通过表格添加删除修改查询方法

下面我就为大家分享一篇angularJs 表格添加删除修改查询方法，具有很好的参考价值，希望对大家有所帮助。如下所示：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="agl/angular.min.js"></script><script>var app=angular.module("mpp",[]);app.controller("ctrl",function ($scope) {$scope.arr=[];$scope.add=function () {$scope.arr.push({name:$scope.name,password:$scope...

Angular操作table表格使其排序

这次给大家带来Angular操作table表格使其排序，Angular操作table表格使其排序的注意事项有哪些，下面就是实战案例，一起来看一下。完整代码如下：<!DOCTYPE html> <html><head><meta charset="utf-8" /><title> Angular表格排序</title><style>table{border: 1px solid;text-align: center;width: 40%;height: 400px;}tr,td{border: 1px solid;}tr:nth-child(2n){background: gainsboro;}</style><script type="text/javascript" s...

Angular实现表格过滤，删除功能

这次给大家带来Angular实现表格过滤，删除功能，Angular实现表格过滤，删除功能的注意事项有哪些，下面就是实战案例，一起来看一下。具体代码如下：<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>www.gxlcms.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{m...

angularJs实现表格添加删除修改查询功能代码

本文主要和大家分享angularJs实现表格添加删除修改查询功能代码，希望能帮助到大家。如下所示：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="agl/angular.min.js"></script><script>var app=angular.module("mpp",[]);app.controller("ctrl",function ($scope) {$scope.arr=[];$scope.add=function () {$scope.arr.push({name:$scope.name,password:$scope.password,age:$scop...

Angular实现将填入表单的数据渲染到表格【图】

本文主要和大家介绍Angular将填入表单的数据渲染到表格的方法，非常具有实用价值，需要的朋友可以参考下，希望能帮助到大家。一、项目简介我们将采用Angular框架来做一个demo，这个demo将要实现的功能如下：在X坐标和Y坐标文本框输入信息，然后点击添加，就会在下面表格中出现一项相应的数据，点击每一项旁边的删除按钮，该条信息就会被删除！因为我们的表格数据是经常刷新的，所以我们把它独立出来作为一个组件。二、项目目录---...

ANGULAR - 技术教程分类

Angular 2 教程 Angular 2 架构 Angular 2 数据显示 Angular 2 用户输入 Angular 2 表单 Angular 2 模板语法 angular 全部

ANGULAR - 最热教程

在Angular中如何实现查询天气预报 AngularJS服务service用法总结 Angular.JS中指令ng-if的注意事项小结 AngularJS 异步解决实现方法使用AngularJS和PHP的Laravel实现单页评...AngularJS控制器继承自另一控制器 spring+angular实现导出excel的实现代码关于AngularJS中ng-repeat不更新视图的...在Angular5中如何调用第三方js插件（详...Angular入口组件与声明式组件使用详解

首页 / ANGULAR / 使用Angular如何实现表格过滤

使用Angular如何实现表格过滤

内容导读

内容图文

内容总结

内容备注

内容手机端

【使用Angular如何实现表格过滤】教程文章相关的互联网学习教程文章

ANGULAR - 技术教程分类

ANGULAR - 最新教程

ANGULAR - 最热教程