AngularJS 過(guò)濾器

2018-09-28 17:29 更新

過(guò)濾器

在這一步你將學(xué)習(xí)到如何創(chuàng)建自己的顯示過(guò)濾器。

請(qǐng)重置工作目錄:

    git checkout -f step-9

現(xiàn)在轉(zhuǎn)到一個(gè)手機(jī)詳細(xì)信息頁(yè)面。在上一步,手機(jī)詳細(xì)頁(yè)面顯示“true”或者“false”來(lái)說(shuō)明某個(gè)手機(jī)是否具有特定的特性?,F(xiàn)在我們使用一個(gè)定制的過(guò)濾器來(lái)把那些文本串圖形化:√作為“true”;以及×作為“false”。來(lái)讓我們看看過(guò)濾器代碼長(zhǎng)什么樣子。

步驟8和步驟9之間最重要的不同在下面列出。你可以在 [GitHub][https://github.com/angular/angular-phonecat/compare/step-8...step-9] 里看到完整的差別。

定制過(guò)濾器

為了創(chuàng)建一個(gè)新的過(guò)濾器,先創(chuàng)建一個(gè)phonecatFilters模塊,并且將定制的過(guò)濾器注冊(cè)給這個(gè)模塊。

app/js/filters.js

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

我們的過(guò)濾器命名為checkmark。它的輸入要么是true,要么是false,并且我們返回兩個(gè)表示true或false的unicode字符(\u2713和\u2718)。

現(xiàn)在我們的過(guò)濾器準(zhǔn)備好了,我們需要將我們的phonecatFilters模塊作為一個(gè)依賴注冊(cè)到我們的主模塊phonecat上。

app/js/app/js

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

模板

由于我們的模板代碼寫(xiě)在app/js/filter.js文件中,所以我們需要在布局模板中引入這個(gè)文件。

app/index.html

    ...
     <script src="/attachments/image/wk/angularjstutorial/controllers.js"></script>
     <script src="/attachments/image/wk/angularjstutorial/filters.js"></script>
    ...

在AngularJS模板中使用過(guò)濾器的語(yǔ)法是:

{{ expression | filter }}

我們把過(guò)濾器應(yīng)用到手機(jī)詳細(xì)信息模板中:

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

測(cè)試

過(guò)濾器和其他組件一樣,應(yīng)該被測(cè)試,并且這些測(cè)試實(shí)際上很容易完成。

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');
        }));
      });
    });

注意在執(zhí)行任何過(guò)濾器測(cè)試之前,你需要為phonecatFilters模塊配置我們的測(cè)試注入器。

執(zhí)行./scripts/test/sh運(yùn)行測(cè)試,你應(yīng)該會(huì)看到如下的輸出:

    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)

練習(xí)

  • 現(xiàn)在讓我們來(lái)練習(xí)一下[AngularJS內(nèi)置過(guò)濾器][ng.$filter],在index.html中加入如下綁定:

    • {{ "lower cap string" | uppercase }}
    • {{ {foo: "bar", baz: 23} | json }}
    • {{ 1304375948024 | date }}
    • {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
  • 我們也可以用一個(gè)輸入框來(lái)創(chuàng)建一個(gè)模型,并且將之與一個(gè)過(guò)濾后的綁定結(jié)合在一起。在index.html中加入如下代碼:
    <input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}

總結(jié)

現(xiàn)在你已經(jīng)知道了如何編寫(xiě)和測(cè)試一個(gè)定制化插件,在 事件處理器 中我們會(huì)學(xué)習(xí)如何用 AngularJS 繼續(xù)豐富我們的手機(jī)詳細(xì)信息頁(yè)面。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)