Filter limitTo AngularJS

Definisi dan penggunaan

limitTo Filter mengembalikan array atau string yang hanya mengandung jumlah elemen yang ditentukan.

Ketika limitTo Filter digunakan untuk array, ia mengembalikan array yang hanya mengandung jumlah item yang ditentukan.

Ketika limitTo Filter digunakan untuk string, ia mengembalikan string yang hanya mengandung jumlah karakter yang ditentukan.

Ketika limitTo Filter digunakan untuk angka, ia mengembalikan string yang hanya mengandung jumlah angka yang ditentukan.

Penggunaan angka negatif untuk mengembalikan elemen dari ujung elemen, bukannya dari awal.

Halaman yang berhubungan

Panduan AngularJS:Filter Angular

Contoh

Contoh 1

Tampilkan hanya tiga elemen pertama dari 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>

Coba Sendiri

Contoh 2

Tampilkan tiga elemen terakhir dari 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>

Coba Sendiri

Contoh 3

Tampilkan tiga elemen mulai dari posisi 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>

Coba Sendiri

Contoh 4

Tampilkan tiga karakter pertama 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>

Coba Sendiri

Contoh 5

Tampilkan tiga digit pertama angka:

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

Coba Sendiri

Syarat

{{ objek | batasTo : batas : mulai }}

Parameter