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

时间:2016-07-05 18:20:47

标签: angularjs ng-repeat flow ng-flow

我使用角度ng-flow组件进行文件上传,除了一些细微差别外,它还能很好地工作。我希望能够将我尝试上传的新文件放在列表顶部而不是列表底部,以便用户了解最新上传的文件。我尝试使用命令角度顺序但是,除非它是一个现有列表与将新文件添加到列表相比,它似乎不起作用。

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

<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的重复功能的问题。

2 个答案:

答案 0 :(得分:0)

您可以使用这样的过滤器以相反的顺序实现打印arrai

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

然后可以使用:

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

答案 1 :(得分:0)

要使用orderBy过滤器,您只需要在过滤器中使用该属性,如下所示:

<tr ng-repeat="file in $flow.files | orderBy: 'name'" ng-hide="file.isComplete()">

修改

由于您希望按按时间顺序顺序对商品进行排序,因此它应该会为您提供预期结果:

<tr ng-repeat="file in files | orderBy: '$index': true">

这是一个代码片段:

&#13;
&#13;
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++ })
  }
});
&#13;
<!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>
&#13;
&#13;
&#13;