angularJs使用$watch和$filter过滤器制作搜索筛选实例
更新时间：2017年06月01日 09:01:15 作者：泠泠在路上
本篇文章主要介绍了angularJs使用$watch和$filter过滤器制作搜索筛选实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
整理文档，搜刮出一个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 获取ng-repeat动态生成的ng-model值实例详解
这篇文章主要介绍了AngularJS 获取ng-repeat动态生成的ng-model值实例详解的相关资料,这里提供实例代码及实现效果图，需要的朋友可以参考下2016-11-11
这篇文章主要介绍了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人气JavaScript库,需要的朋友可以参考下2015-06-06
本篇文章详细的介绍了AngularJS表单和输入验证实例， AngularJS表单可以提供验证功能。有需要的可以了解一下。2016-11-11
这篇文章主要介绍了angular 实现下拉列表组件的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
基于Angularjs-router动态改变Title值的问题
今天小编就为大家分享一篇基于Angularjs-router动态改变Title值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
这篇文章主要介绍了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法,对比不同浏览器错误提示分析了加载失败的原因及通过http访问的解决方法,需要的朋友可以参考下2017-01-01
本篇文章主要介绍了详解angularjs 学习之 scope作用域，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
不久前WebStorm的频繁卡死终于让我受不鸟了,我决定换个轻量级的编辑器，尝试了Emacs、Sublime text,最后选择了vscode。下面这篇文章主要给大家介绍了关于Angular2开发环境搭建教程之VS Code的相关资料，需要的朋友可以参考下。2017-12-12
angularJS+requireJS实现controller及directive的按需加载示例
本篇文章主要介绍了angularJS+requireJS实现controller及directive的按需加载示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
前端在做数据渲染的时候经常会遇到在数据渲染完毕后执行某些操作，这篇文章主要介绍了监听angularJs列表数据是否渲染完毕的方法示例，非常具有实用价值，需要的朋友可以参考下2018-11-11
最新评论