angularJs使用$watch和$filter過濾器制作搜索篩選實例
更新時間：2017年06月01日 09:01:15 作者：泠泠在路上
本篇文章主要介紹了angularJs使用$watch和$filter過濾器制作搜索篩選實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
整理文檔，搜刮出一個angularJs使用$watch和$filter過濾器制作搜索篩選，稍微整理精簡一下做下分享。
<div ng-app="module" ng-controller="ctrl">
搜索: <input type="text" ng-model="search">
<table border="1" width="600">
<tr>
<td>編號</td>
<td>點擊數(shù)</td>
<td>標題</td>
</tr>
<tr ng-repeat="(k,v) in lists">
<td>{{v.id}}</td>
<td>{{v.click}}</td>
<td>{{v.title}}</td>
</tr>
</table>
</div>
<script>
var m = angular.module('module', []);
m.controller('ctrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.data = [
{id: 1, click: 100, title: '百度'},
{id: 2, click: 200, title: '騰訊'},
{id: 3, click: 300, title: '谷歌'},
];
//臨時數(shù)據(jù)用于顯示
$scope.lists = $scope.data;
$scope.$watch('search',function(n,o){
$scope.lists = $filter('filter')($scope.data,n);
});
}]);
</script>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS 獲取ng-repeat動態(tài)生成的ng-model值實例詳解
這篇文章主要介紹了AngularJS 獲取ng-repeat動態(tài)生成的ng-model值實例詳解的相關(guān)資料,這里提供實例代碼及實現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人氣JavaScript庫,需要的朋友可以參考下2015-06-06
本篇文章詳細的介紹了AngularJS表單和輸入驗證實例， AngularJS表單可以提供驗證功能。有需要的可以了解一下。2016-11-11
這篇文章主要介紹了angular 實現(xiàn)下拉列表組件的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
基于Angularjs-router動態(tài)改變Title值的問題
今天小編就為大家分享一篇基于Angularjs-router動態(tài)改變Title值的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
AngularJS使用ng-inlude指令加載頁面失敗的原因與解決方法
這篇文章主要介紹了AngularJS使用ng-inlude指令加載頁面失敗的原因與解決方法,對比不同瀏覽器錯誤提示分析了加載失敗的原因及通過http訪問的解決方法,需要的朋友可以參考下2017-01-01
本篇文章主要介紹了詳解angularjs 學習之 scope作用域，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
Angular2開發(fā)環(huán)境搭建教程之VS Code
不久前WebStorm的頻繁卡死終于讓我受不鳥了,我決定換個輕量級的編輯器，嘗試了Emacs、Sublime text,最后選擇了vscode。下面這篇文章主要給大家介紹了關(guān)于Angular2開發(fā)環(huán)境搭建教程之VS Code的相關(guān)資料，需要的朋友可以參考下。2017-12-12
angularJS+requireJS實現(xiàn)controller及directive的按需加載示例
本篇文章主要介紹了angularJS+requireJS實現(xiàn)controller及directive的按需加載示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例
前端在做數(shù)據(jù)渲染的時候經(jīng)常會遇到在數(shù)據(jù)渲染完畢后執(zhí)行某些操作，這篇文章主要介紹了監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例，非常具有實用價值，需要的朋友可以參考下2018-11-11