[Angular Tutorial] 11 -Custom Filters

在这一步中您将学到如何创建您自己的展示过滤器。

　　·在先前的步骤中，细节页面展示“true”或“false”来显示某部电话是否有某项功能。在这一步中，我们将使用自定义的过滤器来将这些个字符串转化成符号：✓ 代表“true”， ✘代表“false”。

让我们看看过滤器代码看起来是什么样的。

最重要的改变展示如下，您可以点击这里在GitHub上查看全部的不同。

`checkmark过滤器`

由于这个过滤器是大众化的（比如：它没有指向任何视图或组件），我们打算将其在一个core模块中注册，该模块包含了“广泛应用”的特点。

app/core/core.module.js:

angular.module('core', []);

app/core/checkmark/checkmark.filter.js:

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

（正如您可能注意到的那样，我们（不出意外地）给我们文件添加了一个.filter后缀。）

我们的过滤器名为“checkmark”。判断input是true还是false，并且返回两个我们选择的统一字符集中的一个来代表真（\u2713 -> ✓）和假(\u2718 -> ✘)。

现在我们的过滤器已经准备好了，我们需要在我们的主phonecatApp模块中将core模块注册为一个依赖。

app/app.module.js:

angular.module('phonecatApp', [...'core',...
]);

模板

由于我们创建了两个新文件(core.module.js, checkmark.filter.js)，我们需要将它们引入到我们的布局模板。

app/index.html:

...
<script src="core/core.module.js"></script>
<script src="core/checkmark/checkmark.filter.js"></script>
...

在Angular中使用过滤器的语法如下：

{{expression | filter}}

让我们在电话细节模板中部署过滤器：

app/phone-detail/phone-detail.template.html:

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

实验

　　·让我们用一些Angular自带的过滤器来做个实验，在index.html中添加如下绑定：

　　　　·{{'lower cap string' | uppercase}

　　　　·{{{foo: 'bar', baz: 42} | json}}

　　　　·{{1459461289000 | date}}

　　　　·{{1459461289000 | date:'MM/dd/yyyy @ h:mma'}}

　　·我们也可以用input元素创建一个数据模型，并将其绑定至一个过滤器，在index.html中添加如下：

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

总结

现在我们已经学到如何编写一个自制过滤器了，让我们进入下一步来学习怎么使用Angular来扩展电话细节页面。

转载于:https://www.cnblogs.com/krischan/p/5547500.html

[Angular Tutorial] 11 -Custom Filters相关推荐

Ｄistiller tutorial:　Pruning Filters Channels
本文为对distiller教程 Pruning Filters & Channels 的翻译. 原文地址:Pruning Filters & Channels Introduction ...
[转]微软代码示例：ASP.NET 2.0 三层架构应用程序教程系列
本文转自:http://www.codeusing.com/hi/uephee.wen/resource/view/170.aspx 资源分类:微软代码示例更新日期:20 ...
angular面试题及答案_关于最流行的Angular问题的StackOverflow上的48个答案
angular面试题及答案 by Shlomi Levi 通过Shlomi Levi 关于最流行的Angular问题的StackOverflow上的48个答案 (48 answers on Stack ...
Git - Tutorial官方【转】
转自:http://www.vogella.com/tutorials/Git/article.html#git_rename_branch Lars Vogel Version 5.8 Copyri ...
Angular / RxJs我应该何时退订`Subscription`
本文翻译自:Angular/RxJs When should I unsubscribe from `Subscription` When should I store the Subscriptio ...
firebase auth_使用Auth0对Firebase和Angular进行身份验证：第1部分
firebase auth 本文最初发布在Auth0.com博客上 ,并经许可在此处重新发布. 在这个分为两部分的系列教程中,我们将学习如何构建一个使用Auth0身份验证保护Node后端和Angula ...
Angular项目构建指南 - 不再为angular构建而犹豫不决(转)
如果你不知道什么是Angular或者根本没听说过,那么我接下来所说的对你来说毫无益处,不过如果你打算以后会接触Angular或者干脆要涨涨姿势~读下去还是有点用的. Angular和它之前所出现的其余 ...
Angular v6 正式发布
Angular 6 正式发布 Angular 6 已经正式发布了!这个主要版本并不关注于底层的框架,更多地关注于工具链,以及使 Angular 在未来更容易快速推进. 作为发布的一部分,我们同步了主要 ...
【开发记录】DirectX Custom Graphics Engine（1）
DirectX 11 Custom Graphics Engine (1) 这学期修了一节图像编程的课大概是记录一下开发过程?Little bit about myself,博主是个处于大三大四之间 ...

[Angular Tutorial] 11 -Custom Filters

`checkmark过滤器`

[Angular Tutorial] 11 -Custom Filters相关推荐

最新文章

热门文章