Question

不太确定如何提出这个问题，甚至不知道如何搜索TBH。我有一个实时照片/文本流推送到阵列，所以我的页面不断有信息进来。所以我的页面不断收到新信息的速度非常快。我想知道如何或在线搜索什么或基本上“暂停”和“恢复”ng-repeat，同时仍然保持信息推送到阵列，因此出现计数器和按钮，如“10张新照片”。我意识到这可能是一个有问题的问题，但为了保持“简单”，我只想知道如何暂停ng-repeat。

Answer 1

您可以将数组分成两部分。

$scope.items = []; //the visible model would be here
$scope.queue = []; //the pending-to-show elements are here

我们将假设，当一张新照片出现时，会调用以下功能（我不知道你拥有的实际事件处理程序是什么，所以请耐心等待这段代码）：

$scope.onReceiveItem = function(item)
{
    $scope.queue.push(item);
}
$scope.loadmore = function()
{
    Array.prototype.push.apply($scope.items, $scope.queue.splice(0, 10));
}

使用此代码：

您的onReceiveItem将推送队列，而不是实际的可显示数组。
loadmore就是您要拨打的内容＆＃34;还有10个项目＆＃34;。将从队列的开头取10个元素，并通过push将它们附加到实际数组。

或者如果您想根据pause功能执行此操作，则可以：

$scope.onReceiveItem = function(item)
{
    if ($scope.pause) {
        $scope.queue.push(item);
    } else {
        if ($scope.queue.length) {
            //resuming queued items when unpaused and new items arrive
            Array.prototype.push.apply($scope.items, $scope.queue.splice(0, $scope.queue.length));
        }
        $scope.items.push(item);
    }
}

，其他功能也一样。

免责声明：我不知道您是如何获取数据的，所以我只是给了您功能。他们住在$scope但根据您的情况可能不需要。

一般良好做法：假设items数组在更改时会将其值反映到视图中，几乎100％安全，就好像$ digest / $ apply过程是纯粹的魔术。 对于最常见的情况，最好不要在此类内部接收。如果你想要两个＆＃34;实时数据＆＃34;和＃34;死数据＆＃34;，你应该有两种不同的数据结构;问问自己＆＃34;哪些数据是实时的，哪些数据不是？＆＃34;你将有两个数据集。 $scope.queue根本不需要$scope - 为了清楚起见，我把它放在那里 - 但只是在同一个词法范围内是可达的标识符（注意我没有在这里使用$因为我＆＃ 39; m谈论编程概念），如同一控制器中的var queue = [];。

Answer 2

我不确定暂停，但你可以使用像限制到10的东西。像下面的代码可能。 U可以绑定limitTo值而不是硬编码。然后您可以在需要时更新代码中的值。

<div ng-repeat="item in items|limitTo:10">{{item}}</div>

Answer 3

如果您想要“简单”的答案，您可能想要更改一些代码或功能。

Angular使用摘要循环来检查范围中的任何变量自上次运行以来是否发生了变化。这允许它运行脏检查并更新它在视图和模型/控制器之间绑定的变量。

你所要问的是，“一旦我知道有足够的东西改变了，我怎么能暂停Angular的摘要循环并再次启动它？”。您必须在常规循环之外更新范围变量，然后在您真正想要检查时调用$ apply。

离开我的头顶，我解决它的方式是有一个第二个数组，它输入到阵列ng-repeat连接到。你有一个变量，我们称之为$ scope.show，单击暂停时设置为false，单击恢复时设置为true。如果$ scope.show为true，则您的Feed会推送到辅助数组，然后推送到ng-repeat数组。此外，在将$ scope.show切换为true时，立即将所有内容从feed数组推送到不存在的ng-repeat数组中。您还可以将诸如$ scope.diff之类的变量基于辅助长度和ng-repeat数组之间的差异。这将是“新”照片的数量。

“暂停”和“恢复”ng-repeat

3 个答案: