AngularJS orderBy 过滤器

ຄູ່ມືອະນຸມັດ AngularJS

定义和用法

orderBy 过滤器允许我们对数组进行排序。

ໂດຍການຄົ້ນຫາຄວາມລະແກຣດຄຳເວົ້າຈະຖືກຈັດອີລາຄາຕາມຊື່ຕາມອັກສາ ແລະຈະຖືກຈັດອີລາຄາຕາມຕາມຈຳນວນສະຖານະສະພາບ.

ບັນດາຫົວຂໍ້ທີ່ກ່ຽວຂ້ອງ

AngularJS ການສອນກົມປະກາດ Angular

ຄວາມຈຳນວນ

ຕົວຢ່າງ 1

ການສະແດງອີລາຄາຕາມຊື່ຕາມອັກສາ

<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in cars | orderBy">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.cars = ["Dodge", "Fiat", "Audi", "Volvo", "BMW", "Ford"];
});

亲自试一试

ຕົວຢ່າງ 2

ການຈັດອີລາຄາ "city" ສໍາລັບອີລາຄາ
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in customers | orderBy : 'city'">{{x.name + ", " + x.city}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.customers = [
        {"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
        {"name" : "Alfreds Futterkiste", "city" : "Berlin"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
        {"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"},
        {"name" : "B's Beverages", "city" : "London"}
    ];
});

亲自试一试

ຕົວຢ່າງ 3

ການຈັດອີກວ່າ "city" ສໍາລັບອີລາຄາ
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in customers | orderBy : '-city'">{{x.name + ", " + x.city}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
    $scope.customers = [
        {"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
        {"name" : "Alfreds Futterkiste", "city" : "Berlin"},
        {"name" : "Bon app", "city" : "Marseille"},
        {"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
        {"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
        {"name" : "Around the Horn", "city" : "London"},
        {"name" : "B's Beverages", "city" : "London"}
    ];
});

亲自试一试

语法

{{ array | orderBy : expression : reverse }}

参数

参数 描述
expression

用于确定顺序的表达式。表达式可以是以下类型：

字符串：如果数组是对象数组，则可以按对象属性之一的值对数组进行排序。请参阅上面的示例。

函数：您可以创建一个函数来组织排序。

数组：如果需要多个对象属性来确定排序顺序，请使用数组。数组项可以是字符串和函数。
reverse 可选。如果要反转数组的顺序，请设置为 true。

ຄູ່ມືອະນຸມັດ AngularJS