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语句中的CDATA标签的意义
May 09 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
jquery实现tr元素的上下移动示例代码
Dec 20 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
Jquery中request和request.form和request.querystring的区别
Nov 26 Javascript
详解jQuery中的事件
Dec 14 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
openlayers实现地图弹窗
Sep 25 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清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
JavaScript获得url所有参数键值表的方法
2015/03/21 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
vue.js指令和组件详细介绍及实例
2017/04/06 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
python time模块用法实例详解
2014/09/11 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python使用functools实现注解同步方法
2018/02/06 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
flask中的wtforms使用方法
2018/07/21 Python
django admin 添加自定义链接方式
2020/03/11 Python
python logging模块的使用
2020/09/07 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
九年级语文教学反思
2014/02/04 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
工程质量保证书
2015/05/09 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
python实现一个简单的贪吃蛇游戏附代码
2022/06/28 Python
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技