Question

我的项目数组在应用程序中发生了变化。当我删除项目limitTo自动修剪其限制值，但当我添加项目时，它不会返回原始限制值。就像limit = 5和items.length变为2 limitTo值变为3并且当items.length增加时从不增长回到5。 Uplating limit不是＆＃39;工作

JS:
    $scope.filterLimit = 5;
    $scope.itemList2 = ['item1', 'item2', 'item3', 'item4']

HTML:

<div ng-repeat="i in itemList2 | limitTo: filterLimit">
  <h5>{{i}}</h5>
</div>
<button ng-click="itemList2.push('new item')"> Add </button><br>
<button ng-click="itemList2.length = itemList2.length-1"> Delete </button><br>
<button ng-click="filterLimit = filterLimit+1"> Update </button>

Answer 1

好吧，主要问题是您要将相同的元素添加到列表中，因此ngRepeat声称它会产生以下错误：ngRepeat:dupes。

要解决此问题，您必须在track by中使用ngRepeat表达式，如下所示：

<div ng-repeat="i in itemList2 | limitTo: filterLimit track by $index">

注意：过滤器，例如limitTo，orderBy等，必须在track by表达式之前出现。

另外，我建议您使用functions controller ng-click()代替angular.module('app', []) .controller('mainCtrl', function($scope) { $scope.filterLimit = 5; $scope.itemList2 = ['item1', 'item2', 'item3', 'item4']; $scope.add = function() { $scope.itemList2.push('item'); } $scope.delete = function() { $scope.itemList2.pop(); } $scope.increment_filter = function() { $scope.filterLimit++; } });，而不是全部查看。

这是一个修复了所有问题的版本：

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <div ng-repeat="i in itemList2 | limitTo: filterLimit">
    <h5 ng-bind="i"></h5>
  </div>
  <button ng-click="add()"> Add </button>
  <br>
  <button ng-click="delete()"> Delete </button>
  <br>
  <button ng-click="increment_filter()"> Update </button>

  <hr> 
  List: <pre ng-bind="itemList2"></pre>
  Limit: <pre ng-bind="filterLimit"></pre>
</body>

</html>

＆＃13;

let items = (state: any = [], {type, payload}) => {

};

＆＃13;

ng-repeat limitTo自动修剪限制并且不会将其返回

1 个答案: