Загрузить файл ng-flow - как добавить в ТОП списка ng-repeat

Я использую угловой компонент ng-flow для загрузки файлов, и он отлично работает, за исключением нескольких нюансов. Мне бы хотелось, чтобы новые файлы, которые я пытаюсь загрузить, были помещены в верхнюю часть списка, а не в нижнюю часть списка, чтобы пользователям было понятно, какая из них была загружена последней. Я попытался использовать угловой порядок по команде, но это, похоже, не работает, если это не существующий список по сравнению с добавлением нового файла в список.

Как правило, я создаю новую строку для каждого файла после его завершения и распечатываю детали файла:

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

список выглядит так перед загрузкой:

old1 old2 old3

Затем я добавляю новый файл и вижу:

старый1 старый2 старый3 новый1

когда я хотел бы:

новый1 старый1 старый2 старый3

Вероятно, это скорее вопрос использования функции Angular ng-repeat для новых элементов, добавляемых в список.

Источник

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>

Источник

Вы можете использовать фильтр, как это, чтобы добиться печати массива в обратном порядке

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

Который затем может быть использован как:

  <tr ng-repeat="file in $flow.files | reverse" ng-hide="file.isComplete()">
Источник
Другие вопросы по тегам