遍历多个文件上传字段

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>

当提交被触发时，我不清楚让客户端脚本作为一个不同的组遍历所有可用字段的最佳机制。在 name/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>

然后要添加另一组字段，您可以将一个空对象推送到文件中，文件数组将包含所有需要提交的数据。