WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS limitTo Filter


Example

Display just the initial three things of an array:

<div ng-app="myApp" ng-controller="sizeCtrl">

<ul>
<li ng-repeat="x in autos | limitTo : 3">{{x}}</li>
</ul>

</div>

<script>
var application = 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 channel restores a cluster or a string containing as it were a predefined number of elements.

When the limitTo channel is utilized for clusters, it restores an exhibit containing just the predetermined number of items.

When the limitTo channel is utilized for strings, it restores a string containing, just the predefined number of characters.

When the limitTo channel is utilized for numbers, it restores a string containing just the predetermined number of digits.

Use negative numbers to return components beginning from the finish of the component, rather than the beginning.


Syntax

{{ object | limitTo : limit : begin }}

Parameter Values

Value Description
limit  A number, indicating what number of components to return
begin Optional. A number indicating where to start the restriction. Default is 0

More Examples

Example

Display the last three things of the array:

<div ng-app="myApp" ng-controller="sizeCtrl">

<ul>
<li ng-repeat="x in vehicles | limitTo : - 3">{{x}}</li>
</ul>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
});
</script>
Try it yourself »

Example

Display three things, beginning at position 1:

<div ng-app="myApp" ng-controller="sizeCtrl">

<ul>
<li ng-repeat="x in vehicles | limitTo : 3 : 1">{{x}}</li>
</ul>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
});
</script>
Try it yourself »

Example

Display the initial three characters of the string:

<div ng-app="myApp" ng-controller="sizeCtrl">

<h1>{{txt | limitTo : 3}}</h1>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.txt = "Hello, welcome to AngularJS";
});
</script>
Try it yourself »

Example

Display the initial three digits og the number:

<div ng-app="myApp" ng-controller="sizeCtrl">

<h1>{{phone | limitTo : 3}}</h1>

</div>

<script>
var application = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.phone = "123456789";
});
</script>
Try it yourself »

Related Pages

AngularJS Tutorial: Angular Filters