Iterieren durch mehrere Datei-Upload-Felder

Question

Ich habe eine Direktive, die im Wesentlichen mehrere einzelne Eingabedateifelder mit anderen HTML-Formularelementen füllt. Der Mechanismus selbst wird durch automatisches Auffüllen eines Arrays mit der Anzahl der Elemente durchgeführt, das gedrückt wird, wenn mehr Dateifelder hinzugefügt werden. Dies selbst, treibt ein Array mit einer numerischen Liste, die idealerweise den Namen/die ID jedes Elements ändern soll (dies funktioniert auch nicht, das Vorhandensein des {in den Attributen verursacht einen Skript-brechenden Syntaxfehler).

<div ng-controller="MultiFileUpload"> 
    <form ng-submit="file_upload_multiple()" novalidate> 
    <div class="upload_fields"> 
     <fieldset ng-repeat="Item in FileUploadItems"> 
     <input type="file" name="upload_file" id="upload_file_{{Item}}" ngf-select ng-model="filename_{{Item}}" ngf-max-size="2MB" required /> 
     <input type="text" name="filename" id="filename_{{Item}}" required/> 
     <select name="filetype" id='filetype_{{Item}}' required> 
      <option label="" value=""></option> 
      <option label="Example Document 1" value="example_doc_1">Example 1</option> 
      <option label="Example Document 2" value="example_doc_2">Example 2</option> 
     </select> 
     </fieldset> 
    </div> 

    <button>Save Files</button> 
</div> 

Wenn der einreichen abgefeuert wird, bin ich auf dem besten Mechanismus nicht klar, das clientseitige Skript Iterierte durch alle verfügbaren Felder als eigenständige Gruppe zu haben. Der Aufruf der Variablen template im Namen/id ist ein wichtiger Abwurf, und wenn ich eine Lösung erreichen kann, die ohne diesen Schandfleck nach oben skaliert, wäre das großartig. Ich habe bereits eine Idee, wie ich schließlich alle Felddaten speichern werde (durch iterative POST REST-Aufrufe - ich arbeite mit einer sehr veralteten API), aber um zu diesem Schritt zu gelangen, muss der beste Ansatz für die Verarbeitung von mehreren ermittelt werden Feldeinträge. Irgendwelche Vorschläge?

Ich sollte klarstellen, ich benutze ng-form-upload, um bei der Aufgabe der Schnittstelle mit den Daten in den Dateieingabefeldern zu helfen.

Answer 1

können Sie ein Array verwenden Sie Ihr Modell so etwas zu speichern:

<div ng-controller="MultiFileUpload" ng-init="files = [{}]"> 
    <form ng-submit="file_upload_multiple()" novalidate> 
    <div class="upload_fields" ng-repeat="fileData in files"> 
     <fieldset ng-repeat="Item in FileUploadItems"> 
     <input type="file" name="upload_file" ngf-select ng-model="fileData.file" ngf-max-size="2MB" required /> 
     <input type="text" name="filename" ng-model="fileData.name" required/> 
     <select name="filetype" ng-model="fileData.type" required> 
      <option label="" value=""></option> 
      <option label="Example Document 1" value="example_doc_1">Example 1</option> 
      <option label="Example Document 2" value="example_doc_2">Example 2</option> 
     </select> 
     </fieldset> 
    </div> 

    <button>Save Files</button> 
</div> 

Dann eine weitere Reihe von Feldern hinzufügen Sie ein leeres Objekt in Dateien schieben kann und die Dateien-Array werden die Daten alle enthält, ist musste eingereicht werden.