javascript - Ng-Repeat 在末尾添加新项目

标签 javascript angularjs angularjs-ng-repeat

我有一个带有 ng-repeat 的页面。像这样的东西:

<div class="full-row" ng-repeat="row in pendingRequests | partition:3 track by $index">
                      <div class="one-third" ng-repeat="request in row track by request.id" ng-mouseenter="EnterRequest(request)" ng-mouseleave="LeaveRequest(request)">
                      ...

每分钟都有新的请求到服务器以获取新的 pendingRequests 集合。当 1 分钟后服务器返回 pendingRequests 的新集合时,新项目被添加到 ng-repeat block 的末尾,即使这个新项目是从服务器返回的集合中的第一个.

我怎样才能使新的/添加的项目成为 ng-repeat block 中的第一个? 我发现的类似问题是关于 unshift element to collection。但是我有来自服务器的收藏,所以我不会手动添加新项目。


2 @Toxantron :

可能,我的问题是因为我有 2 个 ng-repeat 并且仅在最后一个中继器中我使用 orderby

<div class="full-row" ng-repeat="row in pendingRequests | partition:3 track by $index">
                          <div class="one-third" ng-repeat="request in row | orderBy: '-modificationDate' track by request.id">

还有partition filter的代码

app.filter('partition', function() {
    var cache = {};
    var filter = function(arr, size) {
        if (!arr) { return; }
        var newArr = [];
        for (var i=0; i<arr.length; i+=size) {
            newArr.push(arr.slice(i, i+size < arr.length? i+size : arr.length ));
        }
        var arrString = JSON.stringify(arr);
        var fromCache = cache[arrString+size];
        if (JSON.stringify(fromCache) === JSON.stringify(newArr)) {
            return fromCache;
        }
        cache[arrString+size] = newArr;
        return newArr;
    };
    return filter;
});

最佳答案

我想你试试 orderBy: '-id'

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.requests = [
    { id: 1, name: "Request 1"},
    { id: 2, name: "Request 2"},
    { id: 3, name: "Request 3"},
    { id: 4, name: "Request 4"},
    { id: 5, name: "Request 5"},
    { id: 6, name: "Request 6"}
  ];
});
app.filter('partition', function() {
    var cache = {};
    var filter = function(arr, size) {
        if (!arr) { return; }
        var newArr = [];
        for (var i=0; i<arr.length; i+=size) {
            newArr.push(arr.slice(i, i+size < arr.length? i+size : arr.length ));
        }
        return newArr;
    };
    return filter;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <ol>
    <li ng-repeat="requestRow in requests | orderBy: '-id'|partition: 3">
      <ol>
        <li ng-repeat="request in requestRow" >
          {{ request.name }}
        </li>
      </ol>
    </li>
  </ol>
</div>

关于javascript - Ng-Repeat 在末尾添加新项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36837767/

相关文章:

javascript - 如何在setState中同时编辑数组中对象的特定字段

javascript - 使用 $http.post (angular) 和 bodyparser.text() 发送字符串请求时,请求正文作为对象返回?

javascript - Angular : accessing global variable within html template

angularjs - React 等价于 ng-repeat

javascript - 使用 ng-repeat 从对象属性中的数组访问项目

javascript - ng-repeat 抛出无效表达式

javascript - 如何在不使用 jQuery 的情况下将原始 JavaScript 标签附加到 document.body

javascript - 如何从 Chrome 扩展程序发送 HTTP GET 请求?

Javascript:使用键盘浏览 DIV 列表

angularjs - ng-class 在指令中不起作用