ng-flowアップロードファイル - ng-repeatリストのTOPに追加する方法

ファイルのアップロードにng-flowコンポーネントを使用しています。アップロードしようとしている新しいファイルをリストの一番上に置くのではなく、リストの一番上に置くことができれば、アップロードされた最新のファイルがユーザーには明らかです。コマンドで角度順を使ってみましたが、リストに新しいファイルを追加するのと比べて既存のリストでないとうまくいかないようです。ng-flowアップロードファイル - ng-repeatリストのTOPに追加する方法

基本的に私はそれが完全だ後、ファイルごとに新しい行を作成し、ファイルの詳細を印刷：

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

リストは、アップロードする前に、次のようになります

OLD1 OLD2 old3

私は新しいファイルを追加し、私は参照してください：

古い1 古い2 old3 NEW1

私がしたい：

NEW1 OLD1 OLD2 old3

これはおそらく、リストに追加された新しいアイテムのために角度のngのリピート機能を使用してについての質問の詳細です。

出典

2016-07-05 ldeluca

を、あなただけでプロパティを聞かせて必要フィルタとして、次のように入力します。

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

EDIT

あなたは年代順でアイテムをソートしたいので、それはあなたに期待した結果与える必要があります。

<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-05 18:56:20 developer033

ファイルがすべて存在する場合は問題ありません。問題は、ファイルのリストに新しい項目を追加することです。あなたの例では、4つのファイルはすべて配列の一部として存在し、名前を並べ替えるだけです。私はその名前で注文したくない。私は、新しいファイルが追加された場合、それが名前に関係なく最後ではなく最初でなければならないと言いたい。したがって、新しいファイルfiles.push（{ "id"：3、 "name"： "New1" }）を追加して、リストに含まれる場所を確認します。 – ldeluca

だから、今私がよく理解していれば、名前でソートする必要はありません。それは単なる試みであり、あなたが探していたのは、年代順にソートする方法でしたか？もしそうなら、私の編集された答えを見て、それが今正しいかどうか教えてください。 – developer033

あなたの例ではうまく動作し、正確には私が探していたものですが、私のコードではあなたのように振る舞いません。それは$ indexと何か関係がありますか？ {{file}}のように見えるものをプリントアウトすると、$$ hashKey： "object：56"という複雑なオブジェクトが表示されます。代わりに$ hashKeyで注文するのですか？ – ldeluca

あなたは逆の順序で印刷arraiを達成するために、このように、次にように使用することができます

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

フィルタを使用することができます。orderByフィルタを使用するには

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

出典

2016-07-05 18:48:55

問題がアレイを逆転させることだったなら、彼女は単に次のようにすることができます： ' developer033

あなたは私に説明することができますか？？ –

はい、私の答えでは、以下を見ることができます。 – developer033

ng-flowアップロードファイル - ng-repeatリストのTOPに追加する方法

答えて

関連する問題