AngularJS | limitTo过滤用法指南

2021年3月9日15:45:05 发表评论 1,133 次浏览

限制于AngularJS中的过滤器用于退货包含指定数量的元素的数组或字符串。该过滤器可以与数组, 字符串和数字一起使用。但是, 这三种情况的基本原理都相同。

对于数组, 它返回仅包含指定数量的项目的数组。
当用于字符串时, 它返回另一个包含指定数量字符的字符串。
对于数字, 它将返回仅包含指定数字位数的字符串。
负数用于从元素末尾而不是开头返回元素。

语法如下：

{{ object | limitTo : limit : begin }}

参数：

限制：返回的元素数。
开始：限制的起点。默认值为0。

示例1：

<!DOCTYPE html>
< html >
< script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
   </ script >
  
< body >
  
     < h2 >AngularJS - limitTO</ h2 >
     < br >
     < br >
  
     < div ng-app = "myApp" ng-controller = "myCtrl" >
  
         < strong >Input:</ strong >
         < br >
         < input type = "text" ng-model = "string" >
         < br >
         < br >
         < strong >Output:</ strong >
         < br >
         {{string|limitTo:4}}
  
     </ div >
  
     < script >
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
             $scope.string = "";
         });
     </ script >
  
</ body >
  
</ html >

输出如下：

让我们来看另一个示例, 以使事情更加清楚。

示例2：

<!DOCTYPE html>
< html >
< script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
   </ script >
  
< body >
  
     < h2 >AngularJS - limitTO</ h2 >
     < br >
     < br >
  
     < div ng-app = "myApp"
          ng-controller = "myCtrl" >
  
         < strong >Input:</ strong >
         < br >
         < input type = "text"
                ng-model = "firstName" >
         < br >
         < br >
         < strong >Output:</ strong >
         < br > {{firstName|limitTo:8}}
  
     </ div >
  
     < script >
         var app = angular.module('myApp', []);
         app.controller('myCtrl', function($scope) {
             $scope.firstName = "";
         });
     </ script >
  
</ body >
  
</ html >

输出如下：