AngularJS limitTo-Filter

Definition und Verwendung

limitTo Der Filter gibt ein Array oder einen String zurück, das/der nur die angegebenen Anzahl an Elementen enthält.

Wenn limitTo Wenn der Filter für Arrays verwendet wird, gibt er ein Array zurück, das nur die angegebenen Anzahl an Elementen enthält.

Wenn limitTo Wenn der Filter für Strings verwendet wird, gibt er einen String zurück, der nur die angegebenen Anzahl an Zeichen enthält.

Wenn limitTo Wenn der Filter für Zahlen verwendet wird, gibt er einen String zurück, der nur die angegebenen Stellen enthält.

Bei der Verwendung von Negativzahlen wird von der Elementende ausgegangen, anstatt von der Elementeanfang.

Verwandte Seiten

AngularJS-Tutorial:Angular-Filter

Beispiel

Beispiel 1

Zeige nur die ersten drei Elemente des Arrays:

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

Probieren Sie selbst aus

Beispiel 2

Zeige die letzten drei Elemente des Arrays:

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

Probieren Sie selbst aus

Beispiel 3

Zeige die ersten drei Elemente ab Position 1:

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

Probieren Sie selbst aus

Beispiel 4

Zeige die ersten drei Zeichen des Strings:

<div ng-app="myApp" ng-controller="sizeCtrl">
<h1>{{txt | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.txt = "Hallo, willkommen bei AngularJS";
});
</script>

Probieren Sie selbst aus

Beispiel 5

Zeige die ersten drei Ziffern der Nummer an:

<div ng-app="myApp" ng-controller="sizeCtrl">
<h1>{{phone | limitTo : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.phone = "123456789";
});
</script>

Probieren Sie selbst aus

Syntax

{{ Objekt | limitTo : limit : begin }}

Parameter