angular.module('phonecatFilters', []).filter('checkmark', function() {
 return function(input) {
  return input "htmlcode">

...
angular.module('phonecat', ['phonecatFilters']).
...


模板
由于我们的模板代码写在app/js/filter.js文件中，所以我们需要在布局模板中引入这个文件。
app/index.html


...
 <script src="/UploadFiles/2021-04-02/controllers.js">

在AngularJS模板中使用过滤器的语法是：
{{ 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');
  }));
 });
});


注意在执行任何过滤器测试之前，你需要为phonecatFilters模块配置我们的测试注入器。
执行./scripts/test/sh运行测试，你应该会看到如下的输出：




Chrome: Runner reset.
....
Total 4 tests (Passed: 4; Fails: 0; Errors: 0) (3.00 ms)
 Chrome 19.0.1084.36 Mac OS: Run 4 tests (Passed: 4; Fails: 0; Errors 0) (3.00 ms)



现在让我们来练习一下AngularJS内置过滤器，在index.html中加入如下绑定：

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

  

我们也可以用一个输入框来创建一个模型，并且将之与一个过滤后的绑定结合在一起。在index.html中加入如下代码：
<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}


总结
现在你已经知道了如何编写和测试一个定制化插件，在步骤10中我们会学习如何用AngularJS继续丰富我们的手机详细信息页面。
以上就是对AngularJS 过滤器的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！