0

ファイルのアップロードに angular ng-flow コンポーネントを使用していますが、いくつかのニュアンス以外はうまく機能しています。アップロードしようとしている新しいファイルをリストの一番下ではなくリストの一番上に置いて、ユーザーがアップロードされた最新のファイルを明確にできるようにしたいと考えています。angular order by コマンドを使用してみましたが、新しいファイルをリストに追加するのと比較して既存のリストでない限り、機能しないようです。

基本的に、ファイルが完成したら各ファイルに新しい行を作成し、ファイルの詳細を出力します。

<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 機能を使用することに関する質問です。

4

2 に答える 2

0

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>

于 2016-07-05T18:56:20.007 に答える
0

このようなフィルターを使用して、配列を逆の順序で印刷できます

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

これは次のように使用できます。

  <tr ng-repeat="file in $flow.files | reverse" ng-hide="file.isComplete()">
于 2016-07-05T18:48:55.910 に答える