Ng-Repeat 添加新项目到最后
Ng-Repeat adds new items to the end
我有 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)">
...
每分钟都会向服务器发出新的 collection 请求,共 pendingRequests
。当 1 分钟后服务器 return new collection of pendingRequests
新项目被添加到 ng-repeat
块的末尾,即使这个新项目是 collection 中的第一个return 从服务器编辑。
我怎样才能使 new/added 项成为 ng-repeat
块中的第一个?
我发现的类似问题是关于 unshift
元素到 collection。但是我有来自服务器的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
过滤器的代码
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>
我有 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)">
...
每分钟都会向服务器发出新的 collection 请求,共 pendingRequests
。当 1 分钟后服务器 return new collection of pendingRequests
新项目被添加到 ng-repeat
块的末尾,即使这个新项目是 collection 中的第一个return 从服务器编辑。
我怎样才能使 new/added 项成为 ng-repeat
块中的第一个?
我发现的类似问题是关于 unshift
元素到 collection。但是我有来自服务器的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
过滤器的代码
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>