在角度 ng-repeat 列表的末尾添加项目答案

【问题标题】：Add items end of angular ng-repeat list在角度 ng-repeat 列表的末尾添加项目
【发布时间】：2015-07-09 18:28:02
【问题描述】：

我有一个以 10 个项目开头的 ng-repeat 列表。我想在列表末尾添加新项目（底部）如果我当前运行该函数，它会将项目添加到我的列表顶部。

我知道您可以使用 .push() 和 .unshift() 添加项目，但这不适用于我使用的代码。

这是我的代码（我使用来自 Pubnub 的代码 sn-p 来获取历史项目）：

$scope.messages = [];

$scope.loadMore = function() {

    var timeToken = $('.lastMessage').attr('timetoken');
    console.log(timeToken);

    // Populate message history
    PubNub.ngHistory({
        start: timeToken,
        channel: $scope.channel,
        count: 5,
    });

};

html:

<ion-item ng-repeat="message in messages track by $index">

【问题讨论】：

它们显示在顶部，因为那是 pubNub 的 ngHistory 放置它们的位置。他们的文档建议您可以使用“反向”参数：pubnub.com/docs/angularjs-javascript/pubnub-javascript-sdk 如果这还不够，您需要在更新后修改“消息”数组顺序
'reverse' 将反转项目顺序，但不会影响将项目添加到现有列表的位置。

标签： angularjs ionic-framework ng-repeat pubnub

【解决方案1】：

您可以将 orderby 与 ng-repeat 一起使用。看起来您在每个元素中都有一个时间值，您可以使用它来对列表进行排序。

<tr ng-repeat="item in history | orderBy:'start'">

如果您在元素中有一个 id，您也可以使用“track by”，例如，如果您有一个 id 字段。这允许角度显示重复项。然而，这似乎不是你的问题。从他们的维基：

默认情况下，ngRepeat 不允许数组中有重复项。这是因为当存在重复项时，无法保持集合项和 DOM 元素之间的一对一映射。

如果您确实需要重复重复项目，您可以使用逐个表达式的跟踪替换默认跟踪行为。

<tr ng-repeat="item in history track by $id">

【讨论】：