快捷導(dǎo)航

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

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

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

整理文檔，搜刮出一個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ù)據(jù)用于顯示
    $scope.lists = $scope.data;
    $scope.$watch('search',function(n,o){
      $scope.lists = $filter('filter')($scope.data,n);
    });
  }]);
</script>

效果圖：

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

您可能感興趣的文章:

相關(guān)文章

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