[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来扩展电话细节页面。