angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例
更新時(shí)間：2017年06月01日 09:01:15 作者：泠泠在路上
本篇文章主要介紹了angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
整理文檔，搜刮出一個(gè)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>點(diǎn)擊數(shù)</td>
<td>標(biāo)題</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í)數(shù)據(jù)用于顯示
$scope.lists = $scope.data;
$scope.$watch('search',function(n,o){
$scope.lists = $filter('filter')($scope.data,n);
});
}]);
</script>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Angularjs material 實(shí)現(xiàn)搜索框功能
- Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)
- Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能
- Angularjs實(shí)現(xiàn)搜索關(guān)鍵字高亮顯示效果
- 在 Angular 中實(shí)現(xiàn)搜索關(guān)鍵字高亮示例
- angularjs實(shí)現(xiàn)搜索的關(guān)鍵字在正文中高亮出來
- angularjs實(shí)現(xiàn)分頁和搜索功能
- Angularjs過濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能示例
- Angular封裝搜索框組件操作示例
相關(guān)文章
這篇文章主要介紹了淺談Angular6的服務(wù)和依賴注入，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
AngularJS實(shí)現(xiàn)的自定義過濾器簡單示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的自定義過濾器,結(jié)合實(shí)例形式分析了AngularJS自定義過濾器的簡單定義與使用操作技巧,需要的朋友可以參考下2019-02-02
本文主要介紹AngularJS ng-href 指令,這里對ng-href 基礎(chǔ)資料進(jìn)行詳細(xì)介紹,并附代碼實(shí)例,有興趣的小伙伴可以參考下2016-08-08
淺談Angular.js中使用$watch監(jiān)聽模型變化
當(dāng)angular數(shù)據(jù)模型發(fā)生變化時(shí)，我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。本篇文章主要介紹了Angular.js中使用$watch監(jiān)聽模型變化，有興趣的可以了解一下2017-01-01
Angular2使用SVG自定義圖表（條形圖、折線圖）組件示例
這篇文章主要介紹了Angular2使用SVG自定義圖表（條形圖、折線圖）組件,涉及Angular結(jié)合svg進(jìn)行圖表繪制的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
詳解在Angular4中使用ng2-baidu-map的方法
這篇文章主要介紹了在Angular4中使用ng2-baidu-map的方法，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Angular6 正則表達(dá)式允許輸入部分中文字符的相關(guān)知識，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
AngularJs用戶登錄問題處理（交互及驗(yàn)證、阻止FQ處理）
這篇文章主要為大家詳細(xì)介紹了AngularJs用戶登錄問題處理，包括交互及驗(yàn)證、阻止FQ處理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
眾所周知AngularJS的雙向綁定在表單應(yīng)用中強(qiáng)大又方便，但是偶爾會遇到需要解除對象變量的雙向綁定。Angular提供的angular.copy的方法可以實(shí)現(xiàn)解除雙向綁定。所以這篇文章就來給大家詳細(xì)的介紹下angular.copy，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-11-11