过滤器，顾名思义，有些信息被会过滤到，不显示给用户。有些信息则会经过过滤后显示给用户。是的，在angularjs中，过滤器也是如此。 本节中，我们将展示过滤器在ng-repeat中是如何使用的。 为了更好的对页面进行布局，我们首先引用前台框架`bootstrap`。前面我们讲过了使用bower下载angularjs，在此，我们使用bower下载`bootstrap`。 > npm是一款管理nodejs应用的包管理器，bower是一款管理第三方库（这些库并不依赖于任何服务器）的包管理器。用多了，自然也就清楚了。 ## 下载bootstrap `bower install bootstrap`为了和本教程保持一致，推荐使用`bower install bootstrap#3.3.6`，根据网速的不同，等待的时间也会各有不同。下载完成后目录如下： ~~~ ── app.module.js ├── bower_components │   ├── angular │   ├── bootstrap │   └── jquery ├── index.html ├── test.html └── yun-zhi ├── hello-yunzhi.component.js ├── hello-yunzhi.template.html ├── phone-list.component.js ├── phone-list.template.html └── yun-zhi.module.js ~~~ 有人说，我并没有让它下载jquery呀，jquery怎么自己来了？是的，我们虽然没有下载jquery的需求，但是我们下载的bootstrap依赖于jquery（确切的说是bootstrap一些组件的效果依赖于jquery），bower聪明的地方就在这里，它看到bootstrap后，就知道它依赖于jquery才能正常的工作，所以还为我们自动的下载了jquery。 > 没错，bower就是这么一款伟大的自动解决依赖关系的前端包管理工具。 下载完成后，我们在`index.html`中引用相关CSS文件。 `index.html` ~~~ <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> ~~~ 测试：  状态码：200 或 304 证明成功载入，路径没有问题。 ## 增加查询框 `yun-zhi/phone-list.template.html` ~~~ + Search: <input ng-model="$ctrl.query" /> ~~~ `ng-modle="$ctrl.query"`表示：该`input`输入的信息，会实时的传给$ctrl.query。即$ctrl.query的值会随着`input`中值的变化而变化。 ## 在ng-repeat中使用过滤器 ~~~ <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> ~~~ 最后，我们增加下bootstrap的样式。 `yun-zhi/phone-list.template.html` ~~~ <div class="container-fluid"> <div class="row"> <div class="col-md-2"> Search: <input ng-model="$ctrl.query" /> </div> <div class="col-md-10"> <!--Body content--> <ul class="phones"> <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query"> <span>{{phone.name}}</span> <p>{{phone.snippet}}</p> </li> </ul> </div> </div> </div> ~~~ 然后删除`index.html`中的`hello-yunzhi`标签。 效果：  <a class="btn btn-info" href="http://angular.github.io/angular-phonecat/step-5/app/" target="_blank">查看DEMO（官方）</a>