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 相关文章推荐
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 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
php cli换行示例
2014/04/22 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php 根据自增id创建唯一编号类
2017/04/06 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
html+js实现简单的计算器代码(加减乘除)
2016/07/12 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
pyramid配置session的方法教程
2013/11/27 Python
Python构建XML树结构的方法示例
2017/06/30 Python
详解Python中where()函数的用法
2018/03/27 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
python实现126邮箱发送邮件
2020/05/20 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
《都江堰》教学反思
2014/02/07 职场文书
现场施工员岗位职责
2014/03/10 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
违反交通安全法检讨书
2014/10/24 职场文书
2015年双拥工作总结
2015/04/08 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
军事理论课感想
2015/08/11 职场文书
小学主题班会教案
2015/08/17 职场文书
股东出资协议书
2016/03/21 职场文书
python pyhs2 的安装操作
2021/04/07 Python
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python