AngularJS rajaa suodatin

Määritelmä ja käyttö

rajaa Suodattimet palauttavat taulukon tai merkkijonon, joka sisältää vain tietyn määrän elementtejä.

Kun rajaa Suodattimia käytettäessä taulukoita palautetaan taulukko, joka sisältää vain tietyn määrän elementtejä.

Kun rajaa Suodattimia käytettäessä merkkijonoja palautetaan merkkijono, joka sisältää vain tietyn määrän merkkejä.

Kun rajaa Suodattimia käytettäessä numerot palautetaan merkkijono, joka sisältää vain tietyn määrän numeroita.

Käytettäessä miinuslukuja palautetaan elementit lopusta eikä alusta.

Liittyvät sivut

AngularJS oppituntiohjelma：Angular suodattimet

Esimerkki

Esimerkki 1

Näytä vain taulukon ensimmäiset kolme elementtiä：

<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in cars | rajaa : 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>

Kokeile itse

Esimerkki 2

Näytä taulukon viimeiset kolme elementtiä：

<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in cars | rajaa : -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>

Kokeile itse

Esimerkki 3

Näytä kolme ensimmäistä elementtiä sijainnista 1 alkaen：

<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in cars | rajaa : 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>

Kokeile itse

Esimerkki 4

Näytä merkkijonon ensimmäiset kolme merkkiä：

<div ng-app="myApp" ng-controller="sizeCtrl">
<h1>{{txt | rajaa : 3}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
    $scope.txt = "Hei, tervetuloa AngularJS:iin";
});
</script>

Kokeile itse

Esimerkki 5

Näytä numeron ensimmäiset kolme numeroa:

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

Kokeile itse

Syntaksi

{{ objekti | rajoitaVäliin : rajoita : alkaa }}

Parametrit