angular中的orderBy过滤器使用

一  orderBy过滤器

AngularJS中orderBy进行排序,第一个参数可以有三种类型,分别为:function,string,array:

第一种:function,如果是function,那么function函数会遍历待排序的数组,并将返回的结果作为angular库函数中comparator的参数,进行比较排序。

第二种:如果是字符串,假如待排序的数组为对象,那么将会按照待排序数组中的每个对象的对应属性值,进行排序。如果字符串前边加有“+”,“-”符号,那么+表示升序排序,-表示降序排序。如果字符串为空,那么将按照元素自身进行排序。

第三种:如果是array,那么是第二种情况的一种多属性排序方式 。比如参数为[a,b],那么将先按照a属性值进行排序,如果a属性值相同,那么将按照b属性值进行排序。

如何利用orderBy,实现简单元素数组的排序,需要利用orderBy的第一参数为function的这种类型:定义function 为:

$scope.sortSimpleType(op){

return op;

}

在页面中的代码为:字符串数组排序

<div>

{{[‘test‘,‘bob‘,‘market‘,‘type‘,‘barrow‘] | orderBy: sortSimpleType}}

</div>

排序结果为:

["barrow","bob","market","test","type"]

数字数组排序:

<div>

{{[1,3434,2,1,12121,6,56,3] | orderBy: sortSimpleType}}

</div>

排序结果为:

[1,1,2,3,6,56,3434,12121]

当然了,参数类型为function的orderBy过滤器,也可以用来对元素为对象的数组进行排序。只要在函数中返回对象的属性值即可。

例如,

<div>

{{[{‘name‘:‘nick‘,‘age‘:‘34‘},{‘name‘:‘bob‘,‘age‘:‘23‘}]] | orderBy: sortObjectType}}

</div>

$scope.sortObjectType = function(obj){

return obj[‘name‘]

}

排序结果为:

[{"name":"bob","age":"23"},{"name":"nick","age":"34"}]

对于这种需要按照对象属性进行排序,可以采用orderBy参数类型为string的方式,这样可以充分利用angular的排序特性,对于上述的例子可以改为:

<div>

{{[{‘name‘:‘nick‘,‘age‘:‘34‘},{‘name‘:‘bob‘,‘age‘:‘23‘}]] | orderBy: ‘name‘}}

</div>

//排序结果为:

[{"name":"bob","age":"23"},{"name":"nick","age":"34"}].

针对多属性的排序,采用第三种策略,参数为array类型,如:

<div>

{{[{‘name‘:‘nick‘,‘age‘:34},{‘name‘:‘nick‘,‘age‘:23},{‘name‘:‘bob‘,‘age‘:23}]] | orderBy:[ ‘name‘,‘age‘]}}

</div>

//排序结果为:

[{"name":"bob","age":23},{"name":"nick","age":23},{"name":"nick","age":34}]

到此orderBy的使用介绍已经结束。那么orderBy在angular内部是怎么实现的排序了,需要再次深入对angular的代码做出分析。

时间: 2024-10-06 00:58:47

angular中的orderBy过滤器使用的相关文章

angular中的自定义过滤器

<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="js/angular.min.js"></sc

在 Angular 中实现搜索关键字高亮

在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数据展示在页面中. 但是,在有些情况下,比如我们有一个搜索框,希望将搜索的关键字在正文中高亮出来,这时候就会感觉比较吃力了,filter 可以帮助我们处理这种情况. 实际上,很多时候,我们的数据是不能直接输出到 DOM 中的,典型的比如日期,或者货币等等,通常需要将我们内部的数据格式化之后,再输出到页

(七)理解angular中的module和injector,即依赖注入

依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是javascript/jquery不具备的特性.angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide.对于一个DI容器来说,必须具备3个要素:服务的注册.依赖关系的声明.对象的获取.比如spring中,服务的注册是通过xml配置文件的<bean>标签或是注解@Repository.

orderBy 过滤器

orderBy 过滤器根据表达式排列数组: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edeg" /> <meta nam

理解angular中的module和injector,即依赖注入

依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是javascript/jquery不具备的特性.angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide.对于一个DI容器来说,必须具备3个要素:服务的注册.依赖关系的声明.对象的获取.比如spring中,服务的注册是通过xml配置文件的<bean>标签或是注解@Repository.

angular中的通信方式

在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2)通过rootScope,顶级作用域 3)通过$broadcast,$on,$emit的方式进行通信 在此就讲解下如何通过第三种方式进行通信的问题: $broadcast:顾名思义是广播的意思,一般用于父级控制器向子控制器传递信息的方法. $emit:主要是用于子控制器向父控制器传递信息的方法. $o

angular中的路径问题

我们在写项目时会遇到启动页调到引导页,引导页再调到首页, 那我们在用angular框架写这种东西的时候如果我们不细心的话就会遇到问题, 比如说找不到引导页的图片等等. 那我们怎么解决这个问题呢? 首先我们要明确,我们使用的angular框架所以我们应该使用angular中的框架来解决这个问题, 而不是还是按照原来的思想按部就班的使用路径跳转. 下面我们就来看一下, 1.启动页跳到引导页 app.controller("zeroController",function ($timeout

Angular中的jsonp

1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 1 module.controller('InTheatersController',['$scope','$http', function($scope,$http){ 2 4 var doubanApiAddress = 'https://api.douban.com/v2/movie/in_theaters'; 5 6 /!*在angua

angular中自定义依赖注入的方法和decorator修饰

自定义依赖注入的方法 1.factory('name',function () { return function(){ } }); 2.provider('name',function(){ this.$get=function(){ return function(){ } }; }); 3.service('name',function(){ this.n=v; }); 4.constant('name','value'); 5value('name','value'); 依赖的继承