angularJs中orderBy筛选以及filter过滤数据的方法


Posted in Javascript onSeptember 30, 2018

如下所示:

<div ng-app="module" ng-controller="ctrl">
 <!--按照click降序排序-->
 {{data|orderBy:'click':true}}<br>

 <!--按照id升序排序-->
 {{data|orderBy:'id':false}}<br>

 <!--筛选匹配3的数据-->
 {{data|filter:'3'}}<br>

 <!--筛选完全匹配‘百度'-->
 {{data|filter:'百度':true}}<br>
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', function ($scope) {
  $scope.data=[
   {id:1,click:100,title:'百度'},
   {id:2,click:350,title:'谷歌'},
   {id:3,click:300,title:'网易'},
  ];
 }]);
</script>

效果图:

angularJs中orderBy筛选以及filter过滤数据的方法

以上这篇angularJs中orderBy筛选以及filter过滤数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
理解Angular数据双向绑定
Jan 10 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
javascript实现评分功能
Jun 24 Javascript
JavaScript实现多层颜色选项卡嵌套
Sep 21 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 #Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 #Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 #Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 #Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 #Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 #Javascript
You might like
10 个经典PHP函数
2013/10/17 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
Node.js中的require.resolve方法使用简介
2017/04/23 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
用js编写留言板
2020/03/17 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
小程序自动化测试的示例代码
2020/08/11 Javascript
python检测服务器是否正常
2014/02/16 Python
9种python web 程序的部署方式小结
2014/06/30 Python
python append、extend与insert的区别
2016/10/13 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
静心口服夜广告词
2014/03/20 职场文书
第二课堂活动总结
2014/05/07 职场文书
公司承诺书格式
2014/05/21 职场文书
大学课外活动总结
2014/07/09 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
后勤工作个人总结
2015/02/28 职场文书
2015年体育教学工作总结
2015/05/20 职场文书