AngularJS orderBy فیلتر

تعریف و کاربرد

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"];
);
</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" : "بوتوم-دالر مارکتس" ,"city" : "تساوسن"},
        {"name" : "آلفردس فوتارکست", "city" : "برلین"},
        {"name" : "بون اپ", "city" : "مارسلئی"},
        {"name" : "کاکتوس کومیداس پرلور", "city" : "بونوس آیرس"},
        {"name" : "بولیدو کومیداس پرپارادادس", "city" : "مادرید"},
        {"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" : "بوتوم-دالر مارکتس" ,"city" : "تساوسن"},
        {"name" : "آلفردس فوتارکست", "city" : "برلین"},
        {"name" : "بون اپ", "city" : "مارسلئی"},
        {"name" : "کاکتوس کومیداس پرلور", "city" : "بونوس آیرس"},
        {"name" : "بولیدو کومیداس پرپارادادس", "city" : "مادرید"},
        {"name" : "Around the Horn", "city" : "London"},
        {"name" : "B's Beverages", "city" : "London"}
    
);
</script>

آزمایش کنید

نحوه نوشتن

{{ array | orderBy : expression : reverse }}

پارامتر