ng-flow 上传文件 - 如何添加到 ng-repeat 列表的顶部

Question

我正在使用 angular ng-flow 组件上传文件，除了一些细微差别外，它运行良好。我希望能够将我尝试上传的新文件放在列表的顶部而不是列表的底部，这样用户就可以清楚地看到已上传的最新文件。我尝试按命令使用 angular 命令，但与将新文件添加到列表相比，除非它是现有列表，否则这似乎不起作用。

基本上，我会在每个文件完成后为每个文件创建一个新行并打印出文件详细信息：

<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

这可能更多地是关于使用 Angular 的 ng-repeat 功能来添加到列表中的新项目的问题。

Answer 1

你可以像这样使用过滤器实现倒序打印数组

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

然后可以像这样使用：

  <tr ng-repeat="file in $flow.files | reverse" ng-hide="file.isComplete()">

Answer 2

要使用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>

ng-flow 上传文件 - 如何添加到 ng-repeat 列表的顶部

ng-flow upload file - how to add to TOP of ng-repeat list

angularjs

angularjs-ng-repeat

ng-flow