最近在搗鼓angularJs，剛剛入門，教程里有一篇是關於filter的，效果如下所示，學過的都知道，最簡單的一個了。
代碼如下：
1 <!doctype html> 2 <html lang="en" ng-app="phonecatApp"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Google Phone Gallery</title> 6 <link rel="stylesheet" href="css/app.css"> 7 <link rel="stylesheet" href="css/bootstrap.css"> 8 <script src="lib/angular/angular.js"></script> 9 <script src="js/controllers.js"></script> 10 </head> 11 <body ng-controller="PhoneListCtrl"> 12 13 <div class="container-fluid"> 14 <div class="row-fluid"> 15 <div class="span2"> 16 <!--Sidebar content--> 17 18 Search: <input ng-model="query"> 19 20 </div> 21 <div class="span10"> 22 <!--Body content--> 23 24 <ul class="phones"> 25 <li ng-repeat="phone in phones | filter:query"> 26 {{phone.name}} 27 <p>{{phone.snippet}}</p> 28 </li> 29 </ul> 30 31 </div> 32 </div> 33 </div> 34 35 </body> 36 </html>
js代碼如下：
1 'use strict'; 2 3 /* Controllers */ 4 5 var phonecatApp = angular.module('phonecatApp', []); 6 7 phonecatApp.controller('PhoneListCtrl', function($scope) { 8 $scope.phones = [ 9 {'name': 'Nexus S', 10 'snippet': 'Fast just got faster with Nexus S.', 11 'age': 1}, 12 {'name': 'Motorola XOOM™ with Wi-Fi', 13 'snippet': 'The Next, Next Generation tablet.', 14 'age': 2}, 15 {'name': 'MOTOROLA XOOM™', 16 'snippet': 'The Next, Next Generation tablet.', 17 'age': 3} 18 ]; 19 20 });
到這里還沒有什么問題，順着教程的思路往下走，下一篇是講排序的，根據下拉列表的值來決定排序規則，效果圖如下：
，
新代碼：
<!doctype html> <html lang="en" ng-app="phonecatApp"> <head> <meta charset="utf-8"> <title>Google Phone Gallery</title> <link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/bootstrap.css"> <script src="lib/angular/angular.js"></script> <script src="js/controllers.js"></script> </head> <body ng-controller="PhoneListCtrl"> <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> </div> <div class="span10"> <!--Body content--> <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </div> </div> </div> </body> </html>
js的代碼：
'use strict'; /* Controllers */ var phonecatApp = angular.module('phonecatApp', []); phonecatApp.controller('PhoneListCtrl', function($scope) { $scope.phones = [ {'name': 'Nexus S', 'snippet': 'Fast just got faster with Nexus S.', 'age': 1}, {'name': 'Motorola XOOM™ with Wi-Fi', 'snippet': 'The Next, Next Generation tablet.', 'age': 2}, {'name': 'MOTOROLA XOOM™', 'snippet': 'The Next, Next Generation tablet.', 'age': 3} ]; $scope.orderProp = 'age'; });
（ps：具體什么意思就不解釋了，重點不是這個），突發奇想，想着既然輸入框能做filter來過濾，那下拉框也可以啊，開始想着把ng-repeat里的filter后面改為orderProp即可，其實就是這樣，但是沒奏效，因為不匹配，不是沒有匹配下拉框顯示的文本，而是匹配<option>的value屬性。
總之，總結的就是，filter過濾的根據是model的value屬性值。
（寫完博客才發現，其實是很簡單的東西，理所當然是value屬性啊，但是寫到這也不想刪了，就當筆記吧，理解也加深了點。）
我在下拉列表里加了個文本是數字151....的，value是‘F’的option，選中之后就能過濾啦，嘿嘿，這樣是為了明顯的顯示出效果來.可以自己試試。貼圖：
代碼：
1 <select ng-model="orderProp"> 2 <option value="name">Alphabetical</option> 3 <option value="age">Newest</option> 4 <option value="F">151652222222</option> 5 </select>
1