ng-flow-upload-Datei - wie zu TOP von ng-Wiederholungsliste hinzufügen

Ich benutze die Angular ng-Flow-Komponente für den Datei-Upload und es funktioniert gut, abgesehen von ein paar Nuancen. Ich würde gerne in der Lage sein, die neuen Dateien, die ich hochladen möchte, an die Spitze der Liste und nicht am Ende der Liste setzen zu müssen, damit für die Nutzer klar ist, dass die neueste hochgeladen wurde. Ich habe versucht, die eckige Reihenfolge nach Befehl zu verwenden, aber das scheint nicht zu funktionieren, es sei denn, es handelt sich um eine bestehende Liste, verglichen mit dem Hinzufügen einer neuen Datei zur Liste.ng-flow-upload-Datei - wie zu TOP von ng-Wiederholungsliste hinzufügen

Grundsätzlich erstelle ich eine neue Zeile für jede Datei, sobald es fertig ist und die Dateiinformationen ausdrucken:

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

die Liste wie folgt vor dem Hochladen aussieht:

Old1 old2 old3

dann füge ich eine neue Datei hinzu und sehe:

old1 old2 old3 new1

wenn Ich mag würde:

new1 Old1 old2 old3

Dies ist wohl eher eine Frage zu Angular des ng-Repeat-Funktionalität für neue Elemente mit in die Liste aufgenommen .

Quelle

2016-07-05 ldeluca

orderBy Filter zu verwenden, müssen Sie lassen nur die Unterkunft Filter, wie die folgenden:

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

EDIT

Da Sie Ihre Einzelteile durch chronologische Reihenfolge zu sortieren, sollte es Ihnen das erwartete Ergebnis geben:

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

Hier ist ein Ausschnitt Arbeits:

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>

Quelle

2016-07-05 18:56:20 developer033

Das ist in Ordnung, wenn die Dateien alle vorhanden sind. Das Problem ist, dass ich der Liste der Dateien ein neues Element hinzufüge. In Ihrem Beispiel sind die 4 Dateien als Teil des Arrays vorhanden und Sie sortieren nur nach dem Namen. Ich möchte nicht mit dem Namen bestellen. Ich möchte sagen, wenn eine neue Datei hinzugefügt wird, dann sollte sie unabhängig von ihrem Namen zuerst und nicht zuletzt sein. Fügen Sie also programmatisch eine neue Datei "push" ({ "id": 3, "name": "New1" }) hinzu und sehen Sie, wo sie in der Liste landet. – ldeluca

Also, wenn ich jetzt gut verstanden habe, brauchst du keine Sortierung nach Namen, es war nur ein Versuch, nach dem du gesucht hast, war eine Möglichkeit, nach * chronologischer * Reihenfolge zu sortieren, oder? Wenn ja, sehen Sie sich meine bearbeitete Antwort an und lassen Sie mich wissen, ob sie jetzt korrekt ist. – developer033

das funktioniert gut in Ihrem Beispiel und genau das, was ich gesucht habe ... aber mit meinem Code verhält es sich nicht wie Ihres. Könnte es etwas mit $ index zu tun haben? Wenn ich ausdrücke, wie eine {{Datei}} aussieht, sehe ich ein kompliziertes Objekt mit $$ HashKey: "object: 56". Würde ich stattdessen mit $ HashKey bestellen? – ldeluca

Sie können wie folgt verwenden Filterdruck arrai in umgekehrter Reihenfolge

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

die dann wie verwendet werden kann, zu erreichen:

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

Quelle

2016-07-05 18:48:55

Nun, wenn das Problem war, das Array umzukehren, könnte sie einfach tun: '', was zu einem völlig anderen Ergebnis führt: "old1 old2 old3 new1". – developer033

Das was ist das. kannst du mir das erklären ? –

Ja, Sie können in meiner Antwort einen Blick darauf werfen .. – developer033

ng-flow-upload-Datei - wie zu TOP von ng-Wiederholungsliste hinzufügen

Antwort

Verwandte Themen