複数のファイルアップロードフィールドを反復する

Question

私は、基本的に、複数の個々の入力ファイルフィールドに他のHTMLフォーム要素を取り込むディレクティブを持っています。メカニズム自体は、要素の数を持つ配列を自動生成することによって行われます。配列の要素数は、追加のファイルフィールドが追加されるとプッシュ/ポップされます。これは、数値リストを持つ配列を駆動します。理想的には、各要素の名前/ idを変更することになっています（これも機能しません。属性に{スクリプトの構文エラーがあります）。

<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> 

提出が発射され、私は別々のグループとして使用可能なすべてのフィールドを介して、クライアント側のスクリプトの反復を持つための最良のメカニズムに明確ではないです。名前/ idにテンプレート変数呼び出しを持つことは大きな問題となります。この目障りさがなければ、私は上に向かってスケールアップするソリューションを実現できます。私はすでに、すべてのフィールドデータをどのように隠すかについて考えています（POST RESTの繰り返し呼び出しによって、私は非常に古くなったAPIで作業しています）。しかし、そのステップに進むには、フィールドエントリ。助言がありますか？

私は、ファイル入力フィールドのデータとのインタフェース作業を支援するためにng-form-uploadを使用しています。

Answer 1

あなたは、このようなあなたのモデルに何かを保存するために、配列を使用することができます。

<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> 

そして、フィールドの別のセットを追加するために、ファイルに空のオブジェクトをプッシュすることができ、ファイルアレイ意志があるすべてのデータが含まれています提出する必要がありました。