文档章节

angular2 全局搜索 pipe

今天来找bug
 今天来找bug
发布于 2016/11/29 14:31
字数 194
阅读 297
收藏 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
粉丝 9
博文 214
码字总数 36040
作品 0
深圳
程序员
【前端】—聊聊我认识的Angular

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

zt15732625878
05/19
0
0
Angular 中得 scope 作用域梳理

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同...

顽Shi
2014/09/21
0
2
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
angular js 自学笔记(一)

js中的mvc mvc设计模式,简单说来是将复杂的代码设计规范化,把应用的输入,处理,输出分开,M是指数据模型,V是指用户界面,C则是控制器。像我刚接触的SSH框架中,例如struts,就是利用mvc的...

烽穹寒渊
2015/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
3分钟前
0
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
37分钟前
0
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
0
0
openJDK之sun.misc.Unsafe类CAS底层实现

注:这篇文章参考了https://www.cnblogs.com/snowater/p/8303698.html 1.sun.misc.Unsafe中CAS方法 在sun.misc.Unsafe中CAS方法如下: compareAndSwapObject(java.lang.Object arg0, long a......

汉斯-冯-拉特
今天
2
0
设计模式之五 责任链模式(Chain of Responsibility)

一. 场景 相信我们都有过这样的经历; 我们去职能部门办理一个事情,先去了A部门,到了地方被告知这件事情由B部门处理; 当我们到了B部门的时候,又被告知这件事情已经移交给了C部门处理; ...

JackieRiver
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部