ionic1 过滤器代码

angularJS 中的过滤器真的很强大。有时间可以好好静下来研究它的功能。

直接说思路

先写好html界面，代码有贴出部分，这些有点基础的都写的出来。

这个功能的核心在于双向数据绑定。

通过 ng-model= "searchCont.key" 我们可以很容易得的我们输入的类容，有一个关键点 这个model在js中必须是个Object。

看我js代码 你会发现，代码真的少。

ng-repeat="item in testData | filter:searchCont.key"过滤器在这段代码中的作用体现出来了。我们仅仅是利用了filter 对searchCont.key进行判断过滤。就可以得到以下的过滤效果。

这里要对js有一定的认识 有几个知识点

① 看到js代码 我们会发现 我根本没有写key 这个属性。这个key是js 的object的特性

你可以随时对object添以随时对object添加对象，你也可以定义为txt。这个key并不是js object的keys属性

②就是对filter的理解，过滤器是通过这个key值去过滤对象的 也就是item对象所以当你需要过滤特定的对象的时最好还是自己写一个过滤器。举个例子如果item 带一个隐藏的 用户不可见的参数 如果在搜索栏上输入了还是会查找出来的，这个地方是需要注意的。

③为什么要写这个，因为有个王八蛋这个功能居然收$9 气不过。无需引入多余的js代码，怕有人上当就写了这篇博客。

④那些上当的人有时候也不知道说什么好，学的时候不用心。教程上也有讲到过滤器的使用，其中一个例子就是这个功能。

贴出代码供大家参考。因为懒，所以就没做代码整理。哈哈。

html

<!--模糊查询搜索框-->

< label class= "item item-input-wrapper" style= " margin-left : 2 em ; background : #FFFFFF " >

< i class= "icon ion-ios-search placeholder-icon" ></ i >

< input type= "search" placeholder= "请输出您想查找的内容" ng-model= "searchCont.key" style= " width : 100 % " >

< i class= "icon ion-close-circled placeholder-icon" style= " vertical-align : middle ; "

on-tap= "clearSearch()" ng-if= " searchCont .key.length" ></ i >

</ label >

-----------------------------------------------------------------------------

< div class= "item row" ng-repeat= " item in testData | filter : searchCont .key" ng-click= " lookupInfor ( item )" >

< div class= "col item-text-wrap" style= " text-align : left ; font-size : 0.9 em ; " >

< h2 > {{ item .title}} </ h2 >

< p > {{ item .tid| limitTo : 4:0}}-{{ item .tid| limitTo : 2:4}}-{{ item .tid| limitTo : 2:6}} </ p >

</ div >

< div class= "col-10 col-center ion-arrow-right-a" style= " color : #67B168 ; font-size : 1.5 em ; " >

</ div >

</ div >

js

//模糊查询---start

$scope. searchCont = {}; //搜索内容

$scope. clearSearch = function (){

$scope. searchCont . key = '' ;

}

自定义 过滤器（和项目无关，就是告诉读者 自定义过滤器也很简单）

pp.filter('wordPlace', function ($sce) {
    return function (input, word) {
        if (!word)
            return input;
        var result = input;
        return $sce.trustAsHtml(result);
    };
})