Angular limitTo未返回正确的输出

Angular limitTo does not return proper output

本文关键字：输出 返回 limitTo Angular      更新时间：2023-09-26

我猜下面代码的输出应该是text3和text 4，但没有得到正确的输出。那里的代码有问题吗？

HTML

<body ng-app="angularjs-starter" ng-controller="MainCtrl">
    <h1>Hello {{name}}</h1>
    <div ng-repeat="t in getTimes(4) | limitTo:-2">text {{$index+1}}</div>
  </body>

JS-

var app = angular.module('angularjs-starter', []);
  app.controller('MainCtrl', function($scope) {
     $scope.name = 'World';
     $scope.getTimes = function(n) {
       return new Array(n);
     };
});

$index将始终从0开始，与limitTo过滤器无关。因此，只需在绑定表达式中直接使用t即可。

  <body ng-app="angularjs-starter" ng-controller="MainCtrl">
    <h1>Hello {{name}}</h1>
    <div ng-repeat="t in getTimes(4) | limitTo:-2">text {{t}} </div>
  </body>
  var app = angular.module('angularjs-starter', []);
  app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
     $scope.getTimes=function(n){
       return new Array(n);
     };
});

您的代码不起作用，因为您的集合中有重复项，并且getTimes()正在重新调整[undefined, undefined, undefined, undefined]。

在这种情况下，请将t in getTimes(4) | limitTo:-2 track by $index与正确的数组初始化一起使用，或者使用避免重复的函数。

另一个问题是$index总是以0开头。因此，您不会像预期的那样得到文本3和文字4。如果需要数组值，则需要使用text {{t}}。

示例：

按$index跟踪

var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.getTimes=function(n){
        return new Array(n);
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="angularjs-starter" ng-controller="MainCtrl">
    <h1>Hello {{name}}</h1>
    <div ng-repeat="t in getTimes(4) | limitTo:-2 track by $index">text {{$index+3}}</div>
</body>

或

序列阵列

var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.getTimes = function(n){
        return Array.apply(null, {length: n}).map(Number.call, Number); // [0, 1, ..., n-1]
    };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="angularjs-starter" ng-controller="MainCtrl">
    <h1>Hello {{name}}</h1>
    <div ng-repeat="t in getTimes(4) | limitTo: -2">text {{t+1}}</div>
</body>

相关文章：