angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例

更新時(shí)間：2017年06月01日 09:01:15 作者：泠泠在路上

本篇文章主要介紹了angularJs使用$watch和$filter過濾器制作搜索篩選實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

整理文檔，搜刮出一個(gè)angularJs使用$watch和$filter過濾器制作搜索篩選，稍微整理精簡(jiǎn)一下做下分享。

<div ng-app="module" ng-controller="ctrl">
  搜索: <input type="text" ng-model="search">
  <table border="1" width="600">
    <tr>
      <td>編號(hào)</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>

效果圖：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解
這篇文章主要介紹了AngularJS 獲取ng-repeat動(dòng)態(tài)生成的ng-model值實(shí)例詳解的相關(guān)資料,這里提供實(shí)例代碼及實(shí)現(xiàn)效果圖，需要的朋友可以參考下
2016-11-11
移除AngularJS下URL中的#字符的方法
這篇文章主要介紹了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人氣JavaScript庫(kù),需要的朋友可以參考下
2015-06-06
AngularJS表單和輸入驗(yàn)證實(shí)例
本篇文章詳細(xì)的介紹了AngularJS表單和輸入驗(yàn)證實(shí)例， AngularJS表單可以提供驗(yàn)證功能。有需要的可以了解一下。
2016-11-11
angular 實(shí)現(xiàn)下拉列表組件的示例代碼
這篇文章主要介紹了angular 實(shí)現(xiàn)下拉列表組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
基于Angularjs-router動(dòng)態(tài)改變Title值的問題
今天小編就為大家分享一篇基于Angularjs-router動(dòng)態(tài)改變Title值的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2018-08-08
AngularJS使用ng-inlude指令加載頁(yè)面失敗的原因與解決方法
這篇文章主要介紹了AngularJS使用ng-inlude指令加載頁(yè)面失敗的原因與解決方法,對(duì)比不同瀏覽器錯(cuò)誤提示分析了加載失敗的原因及通過http訪問的解決方法,需要的朋友可以參考下
2017-01-01
詳解angularjs 學(xué)習(xí)之 scope作用域
本篇文章主要介紹了詳解angularjs 學(xué)習(xí)之 scope作用域，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-01-01
Angular2開發(fā)環(huán)境搭建教程之VS Code
不久前WebStorm的頻繁卡死終于讓我受不鳥了,我決定換個(gè)輕量級(jí)的編輯器，嘗試了Emacs、Sublime text,最后選擇了vscode。下面這篇文章主要給大家介紹了關(guān)于Angular2開發(fā)環(huán)境搭建教程之VS Code的相關(guān)資料，需要的朋友可以參考下。
2017-12-12
angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載示例
本篇文章主要介紹了angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-02-02
監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例
前端在做數(shù)據(jù)渲染的時(shí)候經(jīng)常會(huì)遇到在數(shù)據(jù)渲染完畢后執(zhí)行某些操作，這篇文章主要介紹了監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2018-11-11