Question

在我的项目中，我使用ng-repeat和limitto过滤器并跟踪$ index

<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
<button ng-disabled="currentPage >= cil.cilChemicals.length/pageSize - 1" ng-click="currentPage=currentPage+1">Next</button>

<div ng-repeat="chemical in Chemicals | startFrom: currentPage * pageSize  | limitTo:pageSize track by $index">
    <span ng-init="initDetails(chemical)"> {{chemical.details}} </span>
</div>

控制器代码：

$scope.currentPage = 0; 
$scope.pageSize = 50;

Module.filter('startFrom', function() {
    return function(input, start) { 
        start = +start;
        return input.slice(start);
    }
});

使用此设置，在第一次ng-repeat渲染期间调用所有化学物质initDetails(chemical)，因此不会在第一次完美渲染的每个页面调用{但是当我们重复页面时，ng-repeat开始重新开始从阵列之间渲染。

请说明为什么它从两者之间开始，当我们为每个页面使用trackby chemical.chemicalId然后使用angular js调用initDetails(chemical)时。

Answer 1

您拥有ng-init的方式，在每次迭代中运行。

除了（进入曲目）：
当您使用trackby $index时，无论页码如何，第一个元素始终都是$index 0 所以角度不重新渲染html

但是当您将trackby更改为chemical.chemicalIdthen时，会在evey迭代中重新呈现html。

实际上，角度将重新渲染仅在曲目中具有差异的项目，无论是索引还是ID，都是前一项。

我同意@ ste2425的评论。这不是ng-init

的预期用途

只是一个注释：

LimitTo过滤器接受2个参数，limit和begin，
limit是页面大小，begin是开始计数的索引，因此无需为此创建自定义过滤器。

你基本上可以这样做：

<button ng-disabled="currentPage == 0" ng-click="previousPage()">Previous</button>
<button ng-disabled="currentPage >= cil.cilChemicals.length/pageSize - 1" ng-click="nextPage()">Next</button>

<div ng-repeat="chemical in Chemicals | limitTo:pageSize:startFrom track by $index">
    <span ng-init="initDetails(chemical)"> {{chemical.details}} </span>
</div>

和你的控制器

$scope.currentPage = 0; 
$scope.pageSize = 50;
scope.startFrom = 0

$scope.nextPage = function() {
    $scope.currentPage++;
    $scope.startFrom = $scope.currentPage * $scope.pageSize;
};

$scope.previousPage = function() {
    $scope.currentPage--;
    $scope.startFrom = $scope.currentPage * $scope.pageSize;
};

使用Ng-repeat，跟踪和限制一起渲染问题

1 个答案: