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

請重置工作目錄：

git checkout -f step-9

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

步驟8和步驟9之間最重要的不同在下面列出。你可以在GitHub里看到完整的差別。

定制過濾器

為了創(chuàng)建一個新的過濾器，先創(chuàng)建一個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）。

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

app/js/app/js

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

模板

由于我們的模板代碼寫在app/js/filter.js文件中，所以我們需要在布局模板中引入這個文件。

app/index.html

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

在AngularJS模板中使用過濾器的語法是：

{{ expression | filter }}

我們把過濾器應(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>
...

測試

過濾器和其他組件一樣，應(yīng)該被測試，并且這些測試實(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í)行任何過濾器測試之前，你需要為phonecatFilters模塊配置我們的測試注入器。

執(zhí)行./scripts/test/sh運(yùn)行測試，你應(yīng)該會看到如下的輸出：

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)

現(xiàn)在讓我們來練習(xí)一下AngularJS內(nèi)置過濾器，在index.html中加入如下綁定：

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

我們也可以用一個輸入框來創(chuàng)建一個模型，并且將之與一個過濾后的綁定結(jié)合在一起。在index.html中加入如下代碼：

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

總結(jié)

現(xiàn)在你已經(jīng)知道了如何編寫和測試一個定制化插件，在步驟10中我們會學(xué)習(xí)如何用AngularJS繼續(xù)豐富我們的手機(jī)詳細(xì)信息頁面。

以上就是對AngularJS 過濾器的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對本站的支持！

最新評論