【一起学AngularJS】第十一章、自定义过滤器

本章中，我们将学习如何创建自定义的展示过滤器。（注解：Angular中的过滤器一般是对页面上的内容做过滤，并不直接涉及服务端数据的过滤，所以叫展示过滤器也是可想而知的）。

• 在前一章中，详情页使用true或者false来表示某个手机是否有某个功能。下面我们要做的是把这些true和false变成图形化： ✓ 代表 "true", ✘ 代表 "false"。

下面把代码切换到step-9分支：

git checkout -f step-9

刷新浏览器查看效果，你也可以在线上观看效果

自定义过滤器

为了创建一个自定义的过滤器，我们需要创建一个phonecatFilters模块，并且把你的过滤器作为该模块的一部分进行注册。

注解：“作为某个模块的一部分进行注册”不代表把某个功能注册到这个模块中，而是作为这个模块的一部分进行注册，比如A作为B的丈夫一起去登记结婚，不代表A在B那里登记了成了B的丈夫。至于最终注册到哪里，应该是Angular框架的核心注册表。

app/js/filters.js

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

“checkmark”就是我们的过滤器，input的值为true或者false，然后我们根据它的值返回符号形势的“对 ✓”和“错✘”，这两个符号其实都是Unicode的一个字符：(\u2713
-> ✓)、(\u2718-> ✘)。
这样我们的自定义过滤器就写好了，是不是很简单。下面我们再把phonecatFilters注册为phonecatApp模块的一部分。

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

模版

由于过滤器代码在app/js/filters.js文件里，所以我们需要在页面里引用进来：
app/index.html

...
 
 
...

模版中使用过滤器的语法如下：

{{ expression | filter }}

下面是实际的使用代码片段：
app/partials/phone-detail.html

...
    

      
Infrared
      
{{phone.connectivity.infrared | checkmark}}
      
GPS
      
{{phone.connectivity.gps | checkmark}}
    
...

测试

过滤器与其他控件一样，都应该被测试，而且很简单。
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内置的过滤器来做一些实验，首先我们把以下数据绑定添加到index.html中。

• {{ "lower cap string" | uppercase }}
• {{ {foo: "bar", baz: 23} | json }}
• {{ 1304375948024 | date }}
• {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
  然后创建一个模型数据并且办定到input元素上，再为它创建一个过滤器绑定：

 Uppercased: {{ userInput | uppercase }}

总结

现在你已经学会了如何创建和测试自定义过滤器，下一章，我们将进一步增强手机详情页的功能。