Home » AngularJS 入門教學

[AngularJS]AngularJS 入門教學 - Filters (二)

[ 日期： | 瀏覽：26,014 | 迴響：2 ]
範例 1

今天先針對 AngularJS 入門教學 - ngRepeat (一) 有提過的過濾器(Filters) filter 來進行更進一步的說明！

filter

可以將陣列中的元素進行過濾篩選，並回傳一個新的結果陣列。

因為接下來會提到跟搜尋、排序有關的過濾器(Filters)，所以筆者先行準備了一個新的 friends 陣列(js/controller.js)：

檢視原始碼 JavaScript
1
2
3
4
5
6
7
8
9
10
11

$scope.friends = [{
	name: '男丁格爾',
	age: 18,
	skills: ['jQuery', 'JavaScript', 'Angular.js']
} 
// 略...
, {
	name: '布魯克',
	age: 90,
	skills: ['催眠曲·輪舞', '鼻唄三丁·矢筈斬', '冰凍劍', '哼歌·吹雪斬']
}];

然後準備一個 Table 來放置這些內容：

檢視原始碼 HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<div class="span7" style="margin-top:20px;" ng-controller="TableFilterCtrl">
	<div>
		<label>Search:</label>
		<input type="text" ng-model="search">
	</div>
	<table class="table table-striped table-bordered">
		<thead>
			<tr>
				<td>編號</td>
				<td>名稱</td>
				<td>年齡</td>
				<td>專長</td>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="friend in friends | filter:search">
				<td>{{ $index + 1 }}</td>
				<td>{{ friend.name }}</td>
				<td>{{ friend.age }}</td>
				<td>{{ friend.skills.join(', ') }}</td>
			</tr>
		</tbody>
	</table>
</div>

這邊用 ng-repeat 來將 friends 陣列的物件一一展開並產生成 tr 內容，同時還加入一個可以用來進行模糊搜尋的輸入方塊。

當 search 一旦有值輸入了，那麼表格中的內容就會自動的進行過濾篩選：
filters-2-0

不過預設是模糊搜尋，若是想指定過濾的屬性的話，那有辦法嗎？這...當然是有的啊！讓我們再新增兩個輸入方塊：

檢視原始碼 HTML
1
2
3
4
5

<label>Name:</label>
<input type="text" ng-model="search.name">
 
<label>Skills:</label>
<input type="text" ng-model="search.skills">

仔細看好囉，筆者在這兩個輸入方塊除了都加上一樣叫 search 的 model 之外，然後還在其後面多加個 .屬性。這樣我們的 search 就會被擴充進階的過濾功能了：
filters-2-1

但有沒有發現原本的輸入方塊就變成是 [object Object] 了呢？這也是因為雙向資料綁定(Two-way data-binding)的關係。為了讓它不要直接大喇喇的顯示這樣的內容出來，且也要能一樣有無差別過濾功能，所以我們得將 ng-model 修改成：

檢視原始碼 HTML
1

<input type="text" ng-model="search.$">

看吧~沒問題了：
filters-2-2

除了能模糊搜尋之外，其實也能再增加一個參數來決定是不是要完全一模一樣才顯示出來。

檢視原始碼 HTML
1

<label>Equality:<input type="checkbox" ng-model="strict"></label>

接著再將 strict 加到 filter 的後面：

檢視原始碼 HTML
1

<tr ng-repeat="friend in friends | filter:search:strict">

原本上面只輸入個"布"就能篩選出兩筆資料，現在只要有勾選的話，就會變成完全沒有畫面囉，再取消勾選就又能模糊查詢了：
filters-2-3

如果想在 JavaScript 中使用 filter 的話，也請記得先在建立 Controller 時多傳入 $filter：

檢視原始碼 JavaScript
1
2

// true 是指要完全一模一樣才行
$filter('filter')($scope.friends, $scope.search, true)

今天這個範例請各位要好好的實際練習一下，因為接下來的 limitTo 及 orderBy 等過濾器在某種程度上是有一定的關係的喔！

範例 1

檔案描述
基本的範例檔案(免空) 開始下載
基本的範例檔案 會員限定

2 筆針對 [AngularJS]AngularJS 入門教學 - Filters (二) 的迴響

  1. hi 老師
    想請問一下 如果想要多筆搜尋
    如在輸入框打入 aaa | bbb
    讓ng-repeat內的資料就過濾出 aaa 與 bbb 這種
    原本用 Jquery 寫了些過濾器
    但是轉到angular之後不知道怎麼實行
    能給點提示嗎

發表迴響