如何在ng-repeat的file input中传递$index并解决文件上传同步问题？

嘿，这个问题我之前也碰到过，核心就是没给每一行的文件单独绑定专属属性，再加上没利用好$index来定位具体操作的行～ 我给你一步步说怎么改：

1. 先给每条记录添加独立的文件存储属性 #

首先确保你的FilesToShow数组里的每个itemList对象，都有一个用来存当前行文件的属性（比如叫selectedFile）。如果初始没有，你可以在初始化数组的时候加上，或者在上传时动态添加。

2. 在onchange事件中同时传递$index #

修改你的file input的onchange事件，把$index也传进去，这样就能知道是哪一行触发的上传：

<div ng-repeat="itemList in FilesToShow track by $index">
  <!-- 其他内容 -->
  <input type="file" onchange="handleFileChange(this, {{$index}})" />
  <!-- 移除按钮 -->
  <button ng-click="removeFile($index)">x</button>
</div>

这里注意要用{{$index}}把Angular的变量插值成原生JS能识别的数值，因为onchange是原生事件，直接写$index会被当成字符串。

3. 编写处理文件上传的函数 #

在你的控制器里定义handleFileChange函数，根据传入的index找到对应的行，把选中的文件赋值给它的专属属性：

$scope.handleFileChange = function(input, index) {
  if (input.files && input.files[0]) {
    // 把选中的文件赋值给对应行的selectedFile属性
    $scope.FilesToShow[index].selectedFile = input.files[0];
    // 因为是原生事件触发，需要手动触发Angular的脏检查
    $scope.$apply();
  }
};

这里要记得调用$scope.$apply()，因为原生事件不会自动触发Angular的脏检查，不然界面可能不会实时更新。

4. 编写移除文件的函数 #

移除的时候同样利用$index定位到具体行，清空对应的文件属性：

$scope.removeFile = function(index) {
  // 清空对应行的文件，或者根据需求做其他处理
  delete $scope.FilesToShow[index].selectedFile;
  // 或者直接置为null：$scope.FilesToShow[index].selectedFile = null;
};

关键原理 #

之前所有行同步更新，是因为你可能用了一个全局的变量来存文件，所有行都绑定这个变量。现在给每一行单独绑定selectedFile属性，再通过$index精准定位操作的行，就能实现每行独立上传/移除文件啦～

内容的提问来源于stack exchange，提问作者Sandy