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>

Δοκιμάστε το προσωπικά

Παράδειγμα 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": "Βώθος-Δολάριο Αγορές", "city": "Τσαουάσεν"},
        {"name": "Αλφρέντς Φούτερκιστε", "city": "Βερολίνο"},
        {"name": "Bon app", "city": "Μασσαλία"},
        {"name": "Κακτος Συνταγές Για Τέλη", "city": "Μπονς Αϊρς"},
        {"name": "Βολίδο Συνταγές Σερβιρισμένων", "city": "Μαδρίδα"},
        {"name" : "Around the Horn", "city" : "London"}
        {"name" : "B's Beverages", "city" : "London"}
    ];
);
</script>

Δοκιμάστε το προσωπικά

Παράδειγμα 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": "Βώθος-Δολάριο Αγορές", "city": "Τσαουάσεν"},
        {"name": "Αλφρέντς Φούτερκιστε", "city": "Βερολίνο"},
        {"name": "Bon app", "city": "Μασσαλία"},
        {"name": "Κακτος Συνταγές Για Τέλη", "city": "Μπονς Αϊρς"},
        {"name": "Βολίδο Συνταγές Σερβιρισμένων", "city": "Μαδρίδα"},
        {"name" : "Around the Horn", "city" : "London"}
        {"name" : "B's Beverages", "city" : "London"}
    ];
);
</script>

Δοκιμάστε το προσωπικά

Γλώσσα

{{ πίνακας | orderBy : έκφραση : αναστροφή }}

Παράμετροι