angularJs中orderBy筛选以及filter过滤数据的方法
如下所示:
<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过滤器filter用法总结
本文实例总结了AngularJS过滤器filter用法.分享给大家供大家参考,具体如下: 引言 filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输入的值,然后按照某个规则进行处理然后输出最后的结果,例如我们输入一个数字,然后我们需要得到货币形式的数据,这样我们就可以利用过滤器来实现,AngularJS中的过滤器是非常简单的,分为内置和自定义两种,下面小编就简单的给大家介绍一些. 内置过滤器 ng内置了一些过滤器,它们是:currency(货币)
-
AngularJS 过滤与排序详解及实例代码
前面了解了AngularJS的使用方法,这里就简单的写个小程序,实现查询过滤以及排序的功能. 本程序中可以了解到: 1 angularjs的过滤器 2 ng-repeat的使用方法 3 控制器的使用 4 数据的绑定 程序设计分析 首先,如果要是先查询过滤,就要使用到AngularJS中的 过滤器filter 了. 直接在表达式的后面使用管道命令符 | ,按照下面的写法就可以达到一个过滤的效果: {{ persons | filter:query }} 通过使用filter实现过滤操作,query
-
AngularJS变量及过滤器Filter用法分析
本文实例讲述了AngularJS变量及过滤器Filter用法.分享给大家供大家参考,具体如下: 1. 关于部分变量的操作 设置变量: ng-init="hour=14" //设置hour变量在DOM中 使用data-ng-init 更好些 $scope.hour = 14; //设置hour变量在js中 使用变量: (1) 如果是在DOM 相关的 ng-*** 属性里 直接写变量名 如: <p ng-show="hour > 13">I am vi
-
详解AngularJS Filter(过滤器)用法
AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expr
-
走进AngularJs之过滤器(filter)详解
过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何
-
实例解析angularjs的filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子. lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,78
-
Angular.Js中过滤器filter与自定义过滤器filter实例详解
本文主要给大家介绍了Angular.Js过滤器filter与自定义过滤器filter的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 一.AngularJS的filter过滤器: uppercase|lowercase:大小写转换过滤 json:json格式过滤 date:日期格式过滤 number:数字格式过滤 currency:货币格式过滤 filter:查找 limitTo:字符串对象截取 orderBy:对象排序 <!DOCTYPE html> <html lang=&
-
详解AngularJS中$filter过滤器使用(自定义过滤器)
1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般
-
angularJs中orderBy筛选以及filter过滤数据的方法
如下所示: <div ng-app="module" ng-controller="ctrl"> <!--按照click降序排序--> {{data|orderBy:'click':true}}<br> <!--按照id升序排序--> {{data|orderBy:'id':false}}<br> <!--筛选匹配3的数据--> {{data|filter:'3'}}<br> <
-
Angularjs中如何使用filterFilter函数过滤
AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东.AngularJS中有一个filterFilter函数用来对集合过滤,非常方便. 源代码大致如下: function filterFilter(){ return function(aray, expression comparator){ if(!isArray(array)) return array; var comparatorType = typeof(co
-
AngularJS中如何使用$http对MongoLab数据表进行增删改查
主页面: <button ng-click="loadCourse()">Load Course</button> <button ng-click="toggleAddCourse(true)">Add New Course</button> <ng-includce src="'course_list.html'"></ng-include> <ng-include
-
详解AngularJs中$resource和restfu服务端数据交互
$resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 安装 ngResource模块是一个可选的angularjs模块,如果需要使用,我们要单独引用js <script type="text/javascript" src="/javascripts/angular-resource.js"> $resource应用 我们并不是直接通过$resource服务本身同服务器通信,$resource是一个
-
Angularjs中date过滤器失效的问题及解决方法
在开发中遇到date过滤器失效的问题,在其他页面date过滤器没有问题,但是在这个页面出现了问题,后来发现是因为{{now | date : 'yyyy-MM-dd HH:mm:ss'}} now必须是时间戳格式的,后面的过滤器才会生效.而我从后端传过来的时间数据是字符串所以过滤器无法生效 解决方法:在后端处理要传的数据,将里面的时间转为时间戳即可(下面贴我百度到的) /** * 时间转时间戳 */ public static String dateToStamp(String s) throw
-
swiper在angularjs中使用循环轮播失效的解决方法
bug描述:我在anjularjs 中使用了swiper轮播图,通过动态获取到数据插入swiper-slide中,我在swiper初始化中设置了loop(循环),但是在出现了一点小问题,swiper会失效,划不动,当我设置固定的数据通过ng-src 插入到swiper-silde中,会正常轮播,但是第一张图会出现空白.通过查询了资料,发现swiper和angularjs执行的机制是不同的,swiper的机制是:初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类
-
codeigniter中view通过循环显示数组数据的方法
本文实例讲述了codeigniter中view通过循环显示数组数据的方法.分享给大家供大家参考.具体如下: controller如下: <?php class SimpleController extends Controller { function index() { $data['my_list'] = array("do this", "clean up", "do that"); $this->load->view('
-
使用node.js中的Buffer类处理二进制数据的方法
前言 在Node.js中,定义了一个Buffer类,该类用来创建一个专门存放二进制数据的缓存区.这篇文章就详细介绍了node.js中的Buffer类处理二进制数据的方法,下面话不多说,来看看详细的介绍. 创建Buffer对象 第一种:直接使用一个数组来初始化缓存区 var arr = [0,1,2] var buf = new Buffer(arr) console.log(buf) 执行效果: 第二种:直接使用一个字符串来初始化缓存区 var str = 'hello' var buf = n
-
微信小程序中使用ECharts 异步加载数据的方法
官网例子都是同步的,怎么引入及同步demo请移步官网 <view class="container"> <ec-canvas id="mychart-dom-multi-bar" canvas-id="mychart-multi-bar" ec="{{ ecBar }}"></ec-canvas> <ec-canvas id="mychart-dom-multi-scatte
-
AngularJS中重新加载当前路由页面的方法
这个问题同样困扰我很久,网上的回答五花八门,全都不能解决:终于在网上找很久,看到某大神的解决办法,整理作此分享:使用ui-router重新加载当前页面的问题.(ui-router版本需要是0.2.14以上的) 用angular做项目,会碰到需要点击菜单刷新当前页面,加载当前页面,但是同一个路由页面点击没反应: 假设我们的路由页面 app.toMenu ; <a href="#" rel="external nofollow" rel="externa
随机推荐
- 最好用的省市二级联动 原生js实现你值得拥有
- c语言中数组名a和&a详细介绍
- php mysql like 实现多关键词搜索的方法
- 关于Android WebView的loadData方法的注意事项分析
- 解决canvas画布使用fillRect()时高度出现双倍效果的问题
- 用Shell判断字符串包含关系的方法小结
- Java 进制转换的方法
- 深入理解Shell输出颜色与控制
- 比较详细的手把手教你写批处理(willsort题注版)第1/5页
- 优惠券优惠的思路以及实践
- SQL Server误区30日谈 第5天 AWE在64位SQL SERVER中必须开启
- 跟我学习javascript的函数和函数表达式
- python利用标准库如何获取本地IP示例详解
- Android实现商品展示效果
- Java中for循环的执行过程分析
- C语言 变量详解及示例代码
- ASP.NET MVC实现图片上传、图片预览显示
- 解决maven启动Spring项目报错的问题
- vue.js中导出Excel表格的案例分析
- iOS中表情键盘的完整实现方法详解