angularJS過濾器實現篩選列表/下拉框

專案中有時會有這樣的需求：用input輸入框實現對select下拉框或者一個列表的篩選功能。（這是作者寫的一個小demo，請忽略樣式）

篩選的結果：

那麼怎麼用angularJS簡單、便捷地實現這一功能呢？答案是：過濾器(filter)。請看程式碼：

<input type="text" placeholder="請在此輸入關鍵字" ng-model="test">
<ul style="padding-bottom: 200px;">
    <li ng-repeat="x in array | filter : test"
 
>{{x}}</li>
</ul>

PS：小demo中為了簡便，寫了行內式css，請忽略，實際專案中不建議使用行內樣式，不利於後期維護和版本更新。
程式碼說明：input的ng-model繫結的是test，然後列表/下拉框迴圈的時候，在迴圈的陣列後面加上該過濾器‘test’即可。

說明：此demo是在專案引用了angularJS的情況下使用的，對應的controller.js中並不需要再寫關於過濾器的函式或者別的什麼，只需要宣告列表/下拉框迴圈用的陣列就行了：

$scope.array = [ 222,323,533,21,623,2,314,2341
 
,457,5678,789,23 ];

這樣就可以用angularJS的過濾器簡單、便捷地實現篩選效果了：

最後，希望本文對您有所幫助！

個人微信公眾號：小禾子的魔法盒子，歡迎關注！