Question

这是我的问题。我有一个评论卷，使用ng-repeat来显示评论数组的内容。当用户提交评论时，我不想移动到该数组，以便在列表顶部显示最新的评论。这非常有效，但是当我将orderBy过滤器添加到重复时，新注释将应用于重复的底部。

这是注释数组HTML：

<ul ng-repeat="comment in comments | filter:{page_id:raceID} | orderBy:'id':'reverse' track by comment.id ">
    <li>{{comment.id}}</li>
    <li>{{comment.page_id}}</li>
    <li>{{comment.user_name}}</li>
    <li>{{comment.comment_copy}}</li>
</ul>

这是相应的控制器：

        $scope.comment = new newComments({page_id:3, comment_copy:'test comment copy'});

        $scope.comment.$save(function(data) {
            $scope.comments.unshift($scope.comment);
            console.log($scope.comment.id);
        });

.....

Answer 1

我取消了

orderBy:'id':'reverse'

而是使用了另一篇文章中留下的自定义文件管理器Angular ng-repeat in reverse。这是自定义功能

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

现在最新的评论仍未显示在页面顶部，因此我不得不从unshift更改为push。这非常有效。这是代码：

$scope.comment.$save(function(data) {
    $scope.comments.push($scope.comment);
});

Answer 2

原帖中有一些问题：

orderBy:'id':'reverse'应该是orderBy:'id':reverse，其中reverse是布尔值（因此要么用作用域上可用的变量替换它，要么用硬编码的true / false替换它）。目前，它默认为undefined，并被解释为false。
在您的控制器代码中，未分配字段comment。id。它将默认为undefined，这就是排序无法按预期工作的原因。

此外：

unshift

数组push或orderBy将不会对您的用例产生影响。
根据我在Angular 1.5.8中的经验，track by $index实际上阻止了orderBy函数的工作。用要重复的对象上的唯一标识符替换它，即track by comment.id是优选的。在性能方面，它们应该是类似的。不使用track by子句是最慢的选择。（https://docs.angularjs.org/api/ng/directive/ngRepeat）

Answer 3

对我有用，很想知道它如何影响表现：

变化：

track by comment.id

为：

track by $index

unshift()和push()现在都可以正常工作，但同样不确定它会减慢DOM再生的速度。

使用orderBy时，取消对ng-repeat数组不起作用

3 个答案: