ล่าสุดการพัฒนาเว็บบทเรียน
 

AngularJS orderBy กรอง


ตัวอย่าง

แสดงรายการตามลำดับตัวอักษร:

<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"];
});
</script>
ลองตัวเอง»

ความหมายและการใช้งาน

orderBy กรองช่วยให้เราสามารถจัดเรียงอาร์เรย์

โดยค่าเริ่มต้นสตริงเรียงตามตัวอักษรและตัวเลขจะเรียงตัวเลข


วากยสัมพันธ์

{{ array | orderBy : expression : reverse }}

ค่าพารามิเตอร์

Value Description
expression The expression used to determine the order. The expression can be of type:

String: If the array is an array of objects, you can sort the array by the value of one of the object properties. See the examples below.

Function: You can create a function to organize the sorting.

Array: Use an array if you need more than one object property to determine the sorting order. The array items can be both strings and functions.
reverse Optional. Set to true if you want to reverse the order of the array.

ตัวอย่างเพิ่มเติม

ตัวอย่าง

เรียงอาร์เรย์โดย "เมือง" ไปนี้:

<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"}
    ];
});
</script>
ลองตัวเอง»

ตัวอย่าง

เรียงอาร์เรย์โดย "เมือง" ในลำดับถัดลงมา:

<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"}
    ];
});
</script>
ลองตัวเอง»

หน้าเว็บที่เกี่ยวข้อง

AngularJS Tutorial: กรองเชิงมุม