文档章节

angular2 全局搜索 pipe

今天来找bug
 今天来找bug
发布于 2016/11/29 14:31
字数 194
阅读 322
收藏 0
import {Pipe, PipeTransform} from "@angular/core";
@Pipe({
    name: 'tableFilter',
    pure: false
})

export class PipeTableFilter implements PipeTransform {

    transform(items:any[], args:any):any[] {
        var isSearch = (data:any): boolean => {
            var isAll = false;
            if(typeof data === 'object' ){
                for (var z in data) {
                    if(isAll = isSearch(data[z]) ){
                        break;
                    }
                }
            } else {
                if(typeof args === 'number'){
                    isAll = data === args;
                } else {
                    isAll = data.toString().match( new RegExp(args, 'i') );
                }
            }
            return isAll;
        };
        return items.filter(isSearch);
    }

}

使用样例:

<div class="form">
    <div class="form-group row">
        <div class="col-sm-6">
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon2"><i class="fa fa-search"></i> 全局搜索</span>
                <input type="text" class="form-control" placeholder="search" aria-describedby="sizing-addon2" [(ngModel)]="searchText">
            </div>
        </div>
    </div>
</div>
<table class="table table-hover table-striped table-sortable">
    <thead>
    <tr>
        <th *ngFor="let column of columns" [class]="selectedClass(column.variable)" (click)="changeSorting(column.variable)">
            {{column.display}}
        </th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let object of data | tableFilter: searchText | orderBy : convertSorting() | paging: page: pageSize" (click)="selectOneRow(object)" style="cursor: pointer">
        <td *ngFor="let column of columns">
            {{object[column.variable] | format : column.filter}}
        </td>
    </tr>
    </tbody>
</table>

效果:

© 著作权归作者所有

今天来找bug
粉丝 10
博文 214
码字总数 36040
作品 0
深圳
程序员
私信 提问
要的就是速度,Angular 4.0.0 beta0 发布

昨天才刚刚发布“没有 Angular 3 ,Angular 4 计划2017年3月发布”的消息,今天 Angular 4 就来了,首个Bata 版本已经发布。 由于想将核心包版本对齐,加上语义化版本控制,Angular 2 之后将...

王练
2016/12/15
6.4K
31
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
2018/05/19
0
0
试读angular源码第一章:开场与platformBrowserDynamic

开场来个自我介绍 angular 源码阅读 项目地址 文章地址 angular 版本:8.0.0-rc.4 欢迎看看我的类angular框架 关于为什么写这么一个项目 声明:仅仅为个人阅读源码的理解,不一定完全正确,还...

全菜工程师
05/27
0
0
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
Angular 5.0.0-beta.6 和 4.4.0-RC.0,Web 前端框架

Angular 5.0.0-beta.6 和 4.4.0 的首个 RC 版已发布,Angular 5.0.0 beta.6 是 Angular 5 的第七个 beta 版本,正式版预计 9-10 月发布。 Angular 5.0.0-beta.6 部分更新内容: Bug 修复 an...

局长
2017/09/04
1K
8

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
今天
13
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
今天
7
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
今天
10
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
今天
12
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部