Angular 教程：过滤器

在这一步中你将会学习如何创建自定义的过滤器。

在上一步中，详细页面通过显示true或者false来表示一个手机是否具有某项功能。我们将使用一个自定义的过滤器来把这些字符串转换成图标：用✓表示true，用✘表示false

最重要的改动如下所示。你可以在GitHub上查看它与之前的代码有何区别。

自定义过滤器 🔗

为了创建新的过滤器，我们创建了一个phonecatFilters模块，并且将自定义的过滤器注册在这个模块下。

app/js/filters.js：

angular.module('phonecatFilters', []).filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '\u2718';
  };
});

过滤器的名字叫checkmark，input将被转换为true或者false，然后我们根据结果返回两个unicode编码字符中的其中之一。 现在过滤器已经准备好了，我们需要给phonecatApp主模块添加一项phonecatFilters模块的依赖。

app/js/app.js：

...
angular.module('phonecatApp', ['ngRoute','phonecatControllers','phonecatFilters']);
...

模板 🔗

既然过滤器代码存在于app/js/filters.js

文件内，我们就需要把它包含到布局模版中。

app/index.html：

...
 <script src="js/controllers.js"></script>
 <script src="js/filters.js"></script>
...

在Angualr中根据以下语法来使用过滤器：

{{ expression | filter }}

现在我们来给手机详细模板添加过滤器：

app/partials/phone-detail.html：

...
    <dl>
      <dt>Infrared</dt>
      <dd>{{phone.connectivity.infrared | checkmark}}</dd>
      <dt>GPS</dt>
      <dd>{{phone.connectivity.gps | checkmark}}</dd>
    </dl>
...

测试 🔗

就像任何其它的组件一样，过滤器也应该要测一测。所幸的是编写这些测试是非常简单的事情。

test/unit/filtersSpec.js：

describe('filter', function() {

  beforeEach(module('phonecatFilters'));

  describe('checkmark', function() {

    it('should convert boolean values to unicode checkmark or cross',
        inject(function(checkmarkFilter) {
      expect(checkmarkFilter(true)).toBe('\u2713');
      expect(checkmarkFilter(false)).toBe('\u2718');
    }));
  });
});

在每一个过滤器测试执行以前我们都必须调用beforeEach(module('phonecatFilters'))，这个调用将phonecatFilters模块加载到了这些测试的注入器中。 需要注意的是我们调用了工具方法inject(function(checkmarkFilter) { ... })来获取需要被测试的过滤器。参考angular.mock.inject() 与此同时我们也注意到Filter后缀被追加到了我们定义的过滤器名字之后。参考Filter Guide来获取与此有关的信息。 你现在应该能在Karma控制台中看到如下输出：

Chrome 22.0: Executed 4 of 4 SUCCESS (0.034 secs / 0.012 secs)

课外扩展 🔗

我们来试试给index.html中的绑定添加一些Angular的内置过滤器吧：

{{ "lower cap string" | uppercase }} {{ {foo: "bar", baz: 23} | json }} {{ 1304375948024 | date }} {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

与此同时我们也可以创建一个带有输入框的模型，然后给它添加一个带过滤器的绑定：

<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}

总结 🔗

现在我们学会了如何编写和测试自定义的过滤器，通过step 10来学习如何使用Angular扩展手机详细页面。