AngularJS limitTo ฟิลเตอร์

คำอธิบายและวิธีใช้

limitTo ฟิลเตอร์กลับค่าแถวหรือข้อความที่มีจำนวนองค์ประกอบหรือตัวอักษรที่ระบุ

เมื่อ limitTo เมื่อใช้ฟิลเตอร์กับแถว มันจะกลับค่าแถวที่มีจำนวนองค์ประกอบที่ระบุ

เมื่อ limitTo เมื่อใช้ฟิลเตอร์กับตัวอักษร มันจะกลับค่าข้อความที่มีจำนวนตัวอักษรที่ระบุ

เมื่อ limitTo เมื่อใช้ตัวแปรเลขกับฟิลเตอร์ มันจะกลับค่าข้อความที่มีจำนวนตัวอักษรที่ระบุ

เมื่อใช้ตัวเลขลบเพื่อหาองค์ประกอบจากท้ายของตัวอักษร ไม่ใช่จากท้ายของตัวอักษร

หน้าเกี่ยวข้อง

AngularJS คู่มือ:Angular ฟิลเตอร์

ตัวอย่าง

ตัวอย่าง 1

แสดงองค์ประกอบสามตัวแรกของแถว:

<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>

ทดลองด้วยตัวเอง

ตัวอย่าง 2

แสดงสามองค์ประกอบสุดท้ายของแถว:

<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>

ทดลองด้วยตัวเอง

ตัวอย่าง 3

แสดงสามองค์ประกอบจากตำแหน่ง 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>

ทดลองด้วยตัวเอง

ตัวอย่าง 4

แสดงตัวอักษรสามตัวแรกของข้อความ:

<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>

ทดลองด้วยตัวเอง

ตัวอย่าง 5

แสดงเลขที่แรกสามเลข

<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>

ทดลองด้วยตัวเอง

การใช้งาน

{{ object | limitTo : limit : begin }}

ตัวแปร