AngularJS orderBy过滤用法示例

2021年3月10日15:53:35 发表评论 917 次浏览

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 >

输出:

输出1

示例:当我们通过"-"和" +" 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)

输出:

输出示例2
<!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筛选1

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: