Latest web development tutorials
 

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