AngularJS begränsaTill-filter

Definition och användning

begränsaTill Filter returnerar en array eller sträng som endast innehåller ett visst antal element.

När begränsaTill När filter används med arrayer returnerar det en array som endast innehåller ett visst antal objekt.

När begränsaTill När filter används med strängar returnerar det en sträng som endast innehåller ett visst antal tecken.

När begränsaTill När filter används med nummer returnerar det en sträng som endast innehåller ett visst antal tecken.

Använd negativa tal för att returnera element från slutet av elementen istället för från början.

Relaterade sidor

AngularJS-guide:Angular filter

Exempel

Exempel 1

Visa endast de första tre elementen i en array:

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

Prova själv

Exempel 2

Visa de sista tre elementen i en array:

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

Prova själv

Exempel 3

Visa tre element från position 1:

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

Prova själv

Exempel 4

Visa de första tre tecknen i en sträng:

<div ng-app="myApp" ng-controller="sizeCtrl">
<h1>{{txt | begränsaTill : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.txt = "Hej, välkommen till AngularJS";
});
</script>

Prova själv

Exempel 5

Visa de första tre siffrorna i numret:

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

Prova själv

Syntax

{{ objekt | begränsaTill : begränsa : börja }}

Parameter