ng-flow上载文件-如何添加到ng-重复列表的顶部
ng-flow上载文件-如何添加到ng-重复列表的顶部
提问于 2016-07-05 18:20:47
我使用角ng流组件进行文件上传，除了一些细微差别外，它工作得很好。我希望能够将我试图上传的新文件放在列表的顶部，而不是列表的底部，这样用户就可以清楚地看到已经上传的最新文件。我尝试使用角顺序按命令，但这似乎不起作用，除非它是一个现有的列表相比，添加一个新的文件到列表。
基本上，我为每个文件创建一个新行，一旦它完成并打印出文件详细信息：
<tr ng-repeat="file in $flow.files | orderBy:'file.name'" ng-hide="file.isComplete()">上传前的列表如下：
old1
old2
old3然后我添加了一个新文件，我看到：
old1
old2
old3
new1当我想：
new1
old1
old2
old3对于添加到列表中的新项目，这可能更多地是关于使用角的ng重复功能的问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-05 18:56:20
要使用orderBy筛选器，只需将属性放入筛选器中，如下所示：
<tr ng-repeat="file in $flow.files | orderBy: 'name'" ng-hide="file.isComplete()">编辑
由于您希望按时间顺序对项目进行排序，因此应该会给出预期的结果：
<tr ng-repeat="file in files | orderBy: '$index': true">下面是一个代码片段：
var app = angular.module('app', []);
app.controller('mainCtrl', function($scope) {
$scope.files = [
{
"id":1,
"name":"Old1"
},
{
"id":2,
"name":"Old2"
},
{
"id":3,
"name":"Old3"
}
];
var increment = 1;
$scope.push = function (name) {
$scope.files.push({ "id": increment + 3, "name": name + increment++ })
}
});<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<p>Before Filter:
<table>
<tr ng-repeat="file in files">
<td ng-bind="file.name"></td>
</tr>
</table>
<hr />
<p>After Filter:
<table>
<tr ng-repeat="file in files | orderBy: '$index': true">
<td ng-bind="file.name"></td>
</tr>
</table>
<hr>
<button type="button" ng-click="push('New')">Add new file</button>
</body>
</html>
Stack Overflow用户
发布于 2016-07-05 18:48:55
您可以使用像这样的过滤器来实现倒序打印arrai。
app.filter('reverse', function() {
return function(items) {
return items.slice().reverse();
};
});然后可以像这样使用：
<tr ng-repeat="file in $flow.files | reverse" ng-hide="file.isComplete()">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38210113
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号