angularJs使用$watch和$filter过滤器制作搜索筛选实例


Posted in Javascript onJune 01, 2017

整理文档,搜刮出一个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>点击数</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: '谷歌'},
    ];
    //临时数据用于显示
    $scope.lists = $scope.data;
    $scope.$watch('search',function(n,o){
      $scope.lists = $filter('filter')($scope.data,n);
    });
  }]);
</script>

效果图:

angularJs使用$watch和$filter过滤器制作搜索筛选实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的document对象和window对象详解
Dec 30 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
js随机生成一个验证码
Jun 01 #Javascript
JS实现简单抖动效果
Jun 01 #Javascript
深入理解vue中的$set
Jun 01 #Javascript
详解angular中的作用域及继承
May 31 #Javascript
Node学习记录之cluster模块
May 31 #Javascript
Express框架之connect-flash详解
May 31 #Javascript
node.js中express-session配置项详解
May 31 #Javascript
You might like
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
python类参数self使用示例
2014/02/17 Python
python中assert用法实例分析
2015/04/30 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
linux环境下Django的安装配置详解
2019/07/22 Python
Python的条件锁与事件共享详解
2019/09/12 Python
python将音频进行变速的操作方法
2020/04/08 Python
python如何代码集体右移
2020/07/20 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
MyBag中文网:英国著名的时尚包袋电商零售网站
2020/07/31 全球购物
.net C#面试题
2012/08/28 面试题
用Python写一个for循环的例子
2016/07/19 面试题
大专生简历的自我评价
2013/11/26 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
经典毕业生求职信
2014/07/12 职场文书
企业公益活动策划方案
2014/08/24 职场文书
交通事故委托书范本
2014/09/28 职场文书
2014年统计工作总结
2014/11/21 职场文书
农业项目合作意向书
2015/05/08 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
oracle索引总结
2021/09/25 Oracle