AngularJS limitTo Filter
Example
Display only the first three items of an array:
<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>
Try it yourself »
Definition and Usage
The limitTo filter returns an array or a string containing only
a specified number of elements.
When the limitTo filter is used for arrays, it returns an array
containing only the specified number of items.
When the limitTo filter is used for strings, it returns a string
containing, only the specified number of characters.
When the limitTo filter is used for numbers, it returns a string
containing only the specified number of digits.
Use negative numbers to return elements starting from the end of the element, instead of the beginning.
Syntax
{{ object | limitTo :
limit :
begin }}
Parameter Values
| Value | Description |
|---|---|
| limit | A number, specifying how many elements to return |
| begin | Optional. A number specifying where to begin the limitation. Default is 0 |
More Examples
Example
Display the last three items of the array:
<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>
Try it yourself »
Example
Display three items, starting at 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>
Try it yourself »
Example
Display the first three characters of the string:
<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 = "Hello, welcome to AngularJS";
});
</script>
Try it yourself »
Example
Display the first three digits og the number:
<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>
Try it yourself »
Related Pages
AngularJS Tutorial: Angular Filters
