ng-file-upload 不能与 ng-repeat 中的每个元素一起正常工作

Question

我正在尝试为数组中的 ng-repeat 中的每个对象上传多个文件。但是当我尝试为数组中的第二个/第三个对象（第一个元素除外）上传文件时，所有文件都被上传第一个元素。

在下面的代码中

<tbody ng-repeat="book in books">
<tr>
<td>
  <div class="row" style="padding: 15px;">
    <div class="col-xs-2 col-sm-2 col-md-2">
      <h4 >{{ book.seller_name }}</h4>
    </div>
  </div>
  <div class='row' id="tb">
    <div class="col-xs-12 col-sm-12 col-md-12">
      <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" align="center">
          <p class="custom" style="width: 100px;"><b>Total paid price</b><input style="height: 44px;" ng-model="book.paid_price" class="form-control" ng-disabled="!book.editable" type="number" required></p>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" align="center" style="padding-left: 0px;">
          <p style="width: 123px;"><b>Book Number(s)</b><textarea ng-model="book.book_number" class="form-control" ng-disabled="!book.editable" type="text" style="height: 44px;" required></textarea><p style="display:none;">{{book.book_number}}</p></p>
          <div ng-if="editDisabled" class="text-center">
            <div ng-hide="book.image_urls.length == 0">
              <a class="btn btn-primary" id="view_image" style="cursor:pointer;" ng-click="viewbookInvoiceImages(book)">View Book Invoices</a>
            </div>
          </div>
          </br>
          <button class="btn btn-success" type="submit"
              ng-click="submitBookDetail(book)" ng-disabled="!book.editable && !book.enableSubmit">Submit</button>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" align="center" style="margin-top: 17px;padding-left: 2px">
          <input ng-disabled="!book.editable" class="form-control inputFile" align="center" type="file" name="file" id="file" ngf-select ng-model="book.picFiles" ngf-keep="'distinct'" ngf-multiple="true" ngf-change="upload($book.picFiles)"
          accept="image/*" ngf-max-size="8MB" 
          ngf-model-invalid="errorFile" ngf-capture='camera'/>
          <label for="file" class="fileInputLabel" style="height: 45px;width: 120px;" ng-class="{'disableUploadBtn': !book.editable}">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
              <path d="M10 0l-5.2 4.0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>
            </svg>
            Capture Invoices
          </label>
           <i ng-show="errorFile.size" class="fileUploadErrCls" >File too large{{errorFile.size / 1000000|number:1}}MB: max 8M</i><br/>
          <ul class="response">
            <li  ng-repeat="pic in book.picFiles">
              <div>
                {{pic.name}}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</td>
</tr>
</tbody>

我的提交控制器代码是

$scope.submitBookDetail = function(book){
  console.log(book);
  $scope.bookId = book.id
  var images_to_upload = [];
 if(book.picFiles.length !== 0){
   var isInvalidFileFormat = false;
   angular.forEach(book.picFiles , function(picFile){
     var tempObj = {};
     if(picFileTypes.indexOf(picFile.type) === -1){
       $scope.err_msg = 'Please select file of JPEG/PNG type.';
       $scope.succ_display='ng-hide';
       $scope.err_display='ng-show';
       isInvalidFileFormat = true;
     }
     tempObj.image = picFile;
     images_to_upload.push(tempObj);
   });

  images_to_upload.upload = Upload.upload({
    url: ENV.apiEndPoint + 'books/' + $scope.bookId + '?token='+authSrv.getToken(),
    method: 'PUT',
    data: { id: $scope.bookId,
            images : images_to_upload,
            paid_price: book.paid_price,
            book_number: (book.book_number || '')
          }
  });

  images_to_upload.upload.then(function (response) {
    $scope.editDisabled=true;
    book.editable=false;
    book.percent=response.data.percent;
    book.image_urls = response.data.image_urls;
    book.picFiles = []
    book.enableSubmit = false;
    book.succ_msg = 'Book details are successfully updated ';
   },function (response) {
    $scope.editDisabled=true;
    book.editable=false;
    book.err_msg = response.data.message
    book.enableSubmit = false;
   });
}

我猜这是因为上传时的 id='file'。对于循环中的每个索引，id 都是相同的，这就是为什么它假设第一个元素并上传它而不考虑其他索引。如果我给 id='file{{#index}}' ，按钮本身不起作用。我花了一整天都找不到任何东西，谁能建议它的解决方案。

Answer 1

尝试在输入名称、id 和标签中给出唯一的 id，标签属性 for 和输入属性 id

的 id 应该相同

<input ng-disabled="!book.editable" class="form-control inputFile" align="center" type="file" name="file{{$index}}" id="file{{$index}}" ngf-select ng-model="book.picFiles" ngf-keep="'distinct'" ngf-multiple="true" ngf-change="upload($book.picFiles)"
          accept="image/*" ngf-max-size="8MB" 
          ngf-model-invalid="errorFile" ngf-capture='camera'/>
<label for="file{{$index}}" class="fileInputLabel" style="height: 45px;width: 120px;" ng-class="{'disableUploadBtn': !book.editable}">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
              <path d="M10 0l-5.2 4.0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>
            </svg>
            Capture Invoices
          </label>