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>
效果圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了淺談Angular6的服務和依賴注入，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了AngularJS實現(xiàn)的自定義過濾器,結合實例形式分析了AngularJS自定義過濾器的簡單定義與使用操作技巧,需要的朋友可以參考下2019-02-02
本文主要介紹AngularJS ng-href 指令,這里對ng-href 基礎資料進行詳細介紹,并附代碼實例,有興趣的小伙伴可以參考下2016-08-08
淺談Angular.js中使用$watch監(jiān)聽模型變化
當angular數(shù)據(jù)模型發(fā)生變化時，我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。本篇文章主要介紹了Angular.js中使用$watch監(jiān)聽模型變化，有興趣的可以了解一下2017-01-01
Angular2使用SVG自定義圖表（條形圖、折線圖）組件示例
這篇文章主要介紹了Angular2使用SVG自定義圖表（條形圖、折線圖）組件,涉及Angular結合svg進行圖表繪制的相關操作技巧,需要的朋友可以參考下2019-05-05
詳解在Angular4中使用ng2-baidu-map的方法
這篇文章主要介紹了在Angular4中使用ng2-baidu-map的方法，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
angularjs的單選框+ng-repeat的實現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Angular6 正則表達式允許輸入部分中文字符的相關知識，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
AngularJs用戶登錄問題處理（交互及驗證、阻止FQ處理）
這篇文章主要為大家詳細介紹了AngularJs用戶登錄問題處理，包括交互及驗證、阻止FQ處理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
眾所周知AngularJS的雙向綁定在表單應用中強大又方便，但是偶爾會遇到需要解除對象變量的雙向綁定。Angular提供的angular.copy的方法可以實現(xiàn)解除雙向綁定。所以這篇文章就來給大家詳細的介紹下angular.copy，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11