当前位置：首页 > 资讯 > 技术文档

AngularJS入门教程之过滤器详解

时间：2021-06-13 17:34 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJS入门教程之过滤器详解

在这一步你将学习到如何创建自己的显示过滤器。请重置工作目录： git checkout -f step-9 现在转到一个手机详细信息页面。在上一步，手机详细页面显示“true”或者“false”来说明某个手机是否具有特定的特性。现在我们使用一个定制的过滤器来把那些文本串图形化：√作为“true”；以及×作为“false”。来让我们看看过滤器代码长什么样子。步骤8和步骤9之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。 [b]定制过滤器[/b] 为了创建一个新的过滤器，先创建一个phonecatFilters模块，并且将定制的过滤器注册给这个模块。 app/js/filters.js

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

我们的过滤器命名为checkmark。它的输入要么是true，要么是false，并且我们返回两个表示true或false的unicode字符（\u2713和\u2718）。现在我们的过滤器准备好了，我们需要将我们的phonecatFilters模块作为一个依赖注册到我们的主模块phonecat上。 app/js/app/js

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

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

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

在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>
...

[b]测试[/b] 过滤器和其他组件一样，应该被测试，并且这些测试实际上很容易完成。 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中加入如下绑定： [list=1] [*]{{ "lower cap string" | uppercase }}[/*] [*]{{ {foo: "bar", baz: 23} | json }}[/*] [*]{{ 1304375948024 | date }}[/*] [*]{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} [/*] [/list] 我们也可以用一个输入框来创建一个模型，并且将之与一个过滤后的绑定结合在一起。在index.html中加入如下代码： <input ng-model="userInput"> Uppercased: {{ userInput | uppercase }} [b]总结[/b] 现在你已经知道了如何编写和测试一个定制化插件，在步骤10中我们会学习如何用AngularJS继续丰富我们的手机详细信息页面。以上就是对AngularJS 过滤器的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！

全部评论(0)

上一篇：AngularJS ng-repeat指令及Ajax的应用实例分析
下一篇：浅谈angular2路由预加载策略

资讯排行榜
更多>>