本節書摘來自華章出版社《angularjs實戰》一 書中的第3章，第3.2節，作者：陶國榮，更多章節内容可以通路雲栖社群“華章計算機”公衆号檢視。
在上一節介紹完過濾器在視圖模闆中的基本用法後，考慮到它在angular中格式化資料的重要性，在本節中，我們再分别介紹兩個使用過濾器功能應用——表頭排序和字元查找，進一步鞏固上一小節中所學的過濾器基礎知識，掌握過濾器在應用開發中的使用方法。
表頭排序是指在使用清單方式顯示資料時，使用者如果單擊清單中某列的表頭元素，那麼，清單中的全部資料将會自動按該列的屬性值自動排序，預設為升序排列，再次單擊該清單頭元素時，則又變為降序，通過這種方式顯示資料，可以快速定位所關注列中某項資料，給使用者查找資料帶來友善。接下來，我們将使用angular中的過濾器，通過少量簡潔的代碼，實作這個表頭排序的功能。
示例3-4 表頭排序
（1）功能描述
在以清單方式顯示資料的頁面中，當使用者單擊某項清單頭元素時，清單中的資料将會自動根據該項清單的屬性值按升序排列，再次單擊時，将自動按降序排列。
（2）實作代碼
建立一個html檔案3-4.html，加入如代碼清單3-4所示的代碼。
代碼清單3-4 表頭排序
（3）頁面效果
執行html檔案3-4.html，最終實作的頁面效果如圖3-4所示。
（4）源碼分析
在本示例的代碼中，為了實作單擊表頭排序的功能，首先，向頁面控制器代碼中添加“title”和“desc”兩個屬性，分别用于綁定排序時的屬性名稱和排序方向，并賦予初始值“name”和0，表示資料初始化時按“姓名”屬性的升序排列，實作代碼如下。
...省略部分代碼
然後，在頁面的視圖模闆中，當通過ng-repeat指令複制并顯示資料時，調用了“orderby”過濾器，并帶有兩個參數，第一個冒号後的參數指定排序的屬性名，第二個冒号後的參數指定排序時的方向，該參數預設或預設時為升序，1為降序，0為升序。由于“title”和“desc”屬性的初始值分别為“name”和0，是以，在頁面初始化資料時，将按“姓名”屬性的升序排列。
最後，在各個表頭元素的單擊（ng-click）事件中，分别對“title”和“desc”屬性值進行重置。由于這兩個值已與“orderby”過濾器的兩個參數綁定，是以，當這兩個值發生變化時，自動改變資料顯示時的排序屬性名稱和方向，最終實作按單擊表頭的屬性排序的功能。
在介紹完運用“orderby”過濾器實作表頭排序功能之後，我們再來介紹調用“f?ilter”過濾器實作字元查找的功能。在實作過程中，将調用angular中的“f?ilter”過濾器，查找與過濾器冒号後字元參數相比對的資料。如果比對則顯示對應記錄，否則，不顯示任何資料。接下來，我們通過一個完整的示例來介紹調用“f?ilter”過濾器實作字元查找功能的過程。
示例3-5 字元查找
在頁面的文本框中輸入任意字元後，将根據輸入的内容，在清單的“姓名”屬性值中查找相比對的資料，并将比對的資料記錄顯示在頁面的清單中。
建立一個html檔案3-5.html，加入如代碼清單3-5所示的代碼。
代碼清單3-5 字元查找
執行html檔案3-5.html，最終實作的頁面效果如圖3-5所示。
在本示例的源碼中，為了實作清單中的資料根據文本框中輸入的字元内容自動進行過濾的功能，首先，在頁面的控制器代碼中添加一個名為“key”的屬性，用于儲存使用者在文本框中輸入的字元内容，該屬性初始化時為空值。
然後，在通過“ng-repeat”指令顯示資料時，調用angular中的“f?ilter”過濾器，并添加一個對象性字元參數，指定在資料對象的“name”屬性中查找“key”值，即在“姓名”屬性中查找文本框輸入的字元，如果找到，則顯示在清單中，否則不顯示任何資料。
最後，在頁面的視圖模闆中，通過“ng-model”指令雙向綁定控制器中的“key”屬性。由于是雙向綁定，是以，當使用者在文本框中輸入任意字元時，屬性“key”的值将自動同步更新。由于該屬性值又綁定了“f?ilter”過濾器的參數，是以，清單中顯示的資料也将自動更新，進而實作根據使用者輸入的内容，在清單的“姓名”屬性值中查找并顯示資料的功能。