AngularJS orderBy过滤用法示例

orderBy过滤器
是用于角度js的便捷工具。
orderBy渠道鼓励你对展览品进行排序。
当然, 它将按顺序请求对字符串进行排序, 并在数字请求中对数字进行排序。
语法如下：

{{ orderBy_expression | orderBy : expression : reverse }}

参数说明：
表达：
它用于决定请求。很可能是字符串, 作品或集群。
反转：是自由裁量权。如果希望以相反的顺序显示数据, 请确保参数中的反向条件设置为true。
示例：通过名称进行排序

< !DOCTYPE html> < html > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" > < / script > < body > < div ng-app = "myApp" ng-controller = "orderCtrl" > < ul > < li ng-repeat = "x in customers | orderBy : 'name'" > {{x.name + ", " + x.city}} < / li > < / ul > < / div > < script > var app = angular.module('myApp', []); app.controller('orderCtrl', function($scope) { $scope.customers = [ {"name" : "Amber", "city" : "ajmer"}, {"name" : "lakshay ", "city" : "vizag"}, {"name" : "karan", "city" : "London"}, {"name" : "bhaskar", "city" : "peshawar"}, ]; }); < / script > < p > The array items are arranged by "name".< / p > < / body > < / html >

输出：

文章图片
示例：当我们通过"-"和" +" orderBy遍历gdp时, 按情况进行排序

< !DOCTYPE html> < html > < head > < title > AnngularJS Filters : orderBy < / title > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < / script > < style > .tabled{float:left; padding:10px; } < / style > < / head > < body ng-app = "orderByDemo" > < script > angular.module('orderByDemo', []) .controller('orderByController', ['$scope', function($scope) { $scope.countries = [{name:'SPAIN', states:'78', gdp:5}, {name:'FRANCE', states:'46', gdp:4}, {name:'PORTUGAL', states:'53', gdp:3}, {name:'CHILE', states:'06', gdp:2}, {name:'RUSSIA', states:'21', gdp:1}]; }]); < / script > < div ng-controller = "orderByController" > < table class = "tabled" > < tr > < th > Name< / th > < th > No of States< / th > < th > GDP(descending)< / th > < / tr > < !-- orderBy Descending (-) --> < tr ng-repeat = "country in countries | orderBy:'-gdp'" > < td > {{country.name}}< / td > < td > {{country.states}}< / td > < td > {{country.gdp}}< / td > < / tr > < / table > < table class = "tabled" > < tr > < th > Name< / th > < th > No of States< / th > < th > GDP(ascending)< / th > < / tr > < !-- orderBy Ascending (+) --> < tr ng-repeat = "country in countries | orderBy:'gdp'" > < td > {{country.name}}< / td > < td > {{country.states}}< / td > < td > {{country.gdp}}< / td > < / tr > < / table > < / div > < / body > < / html > < strong > Examples: Order by case (seven wonders)

输出：

文章图片

< !DOCTYPE html> < html > < script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" > < / script > < body > < div ng-app = "myApplication" ng-controller = "orderCtrl" > < ul > < li ng-repeat = "x in sevenwonder | orderBy : '-country'" > {{x.name + ", " + x.country}}< / li > < / ul > < / div > < script > var application = angular.module('myApplication', []); application.controller('orderCtrl', function($scope) { $scope.sevenwonder = [ {"name" : "Great Wall of China" , "country" : "China"}, {"name" : "Christ the Redeemer Statue", "country" : "Brazil"}, {"name" : "Machu Picchu", "country" : "peru"}, {"name" : "Chichen Itza ", "country" : "Mexico"}, {"name" : "The Roman Colosseum", "country" : "Rome"}, {"name" : "Taj Mahal", "country" : "India"}, {"name" : "Petra", "country" : "Jordan"} ]; }); < / script > < p > The array items are sorted by "country".< / p > < / body > < / html >

【AngularJS orderBy过滤用法示例】输出：