文档章节

angular2 全局搜索 pipe

今天来找bug
 今天来找bug
发布于 2016/11/29 14:31
字数 194
阅读 299
收藏 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 应用的“外壳”

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wxb141001yxx/article/details/81987588 安装 Angular CLI命令行工具 如果没有安装Angular CLI,那么先执行:...

13期王小波
08/23
0
0
Angular中ui-grid的使用详解

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

半指温柔乐
08/05
0
0
Angular 中得 scope 作用域梳理

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

顽Shi
2014/09/21
0
2
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

没有更多内容

加载失败,请刷新页面

加载更多

Linux命令备忘录: jobs 显示Linux中的任务列表及任务状态命令

jobs命令用于显示Linux中的任务列表及任务状态,包括后台运行的任务。该命令可以显示任务号及其对应的进程号。其中,任务号是以普通用户的角度进行的,而进程号则是从系统管理员的角度来看的...

开元中国2015
49分钟前
1
0
springboot Whitelabel Error Page(Not Found)解决方案

当出现上图图的错误时注意 报错信息 There was an unexpected error (type=Not Found, status=404). Not Found代表未访问到资源 解决方案:比较访问路径和代码的路径有没有写错 正确的访问路...

斩神魂
49分钟前
2
0
记一次hbase master停止服务的原因以及恢复

在Hdfs空间不足的情况下,拒绝写入,hbase会down掉。如果hdfs空间没有清理的情况下,重新启动hbase,会报splitlog失败,原因是wal日志重写过程中会写hdfs,写不进去导致的。重启不成功。 解决...

PageYi
53分钟前
1
0
如何从平面设计转行到UI设计?

时代的变迁,科技的进步,工具的发展,薪资的差距,促使许多人转行的原因,但平面与界面两者之间有着哪些的差异呢?如果,想要转行又该具备哪些条件呢? 平面、界面设计之间的差异性 平面设计...

mo311
56分钟前
4
0
线程池整理

一般在生产环境中,我们都不会直接new一个Thread,然后再去start(),因为这么做会不断频繁的创建线程,销毁线程,过大的线程会耗尽CPU和内存资源,大量的垃圾回收,也会给GC带来压力,延长GC停顿时间...

算法之名
57分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部