为什么ng-repeat没有删除我的文件输入类型，我怎样才能让它正常工作？

I have the following div to allow a user to upload multiple file inputs:

我有以下div允许用户上传多个文件输入:

<div class="form-inline" ng-repeat="file in selectedFiles track by $index">
    <input class="form-control" style="width:350px;" type="text" name="description{{$index}}" ng-model="file.fileDescription" ng-disabled="isDisabled" />
    <input class="form-control" style="width:350px;" type="file" name="file_file{{$index}}" ng-model="file.file" accept="application/pdf" ng-disabled="isDisabled" />
    <button ng-if="$last" class="btn btn-link" ng-click="addFile();" ng-disabled="isDisabled"><i class="glyphicon glyphicon-plus-sign text-success large-font"></i></button>
    <button class="btn btn-link" ng-click="removeFile($index);" ng-disabled="isDisabled"><i class="glyphicon glyphicon-remove text-danger large-font"></i></button>
</div>

And I have the following in my scope:

我的范围内有以下内容:

scope.selectedFiles = [];
scope.addFile = function() {
    scope.selectedFiles.push({});
};
scope.removeFile = function(index) {
    if(index >= 0) {
        scope.selectedFiles.splice(index, 1);
    }
};

If I press the addFile button, it adds rows just fine. If I press the removeFile button, a line is removed, however, the file inputs still remain the same.

如果我按下addFile按钮,它会添加行很好。如果我按下removeFile按钮,则会删除一行,但文件输入仍然保持不变。

For example, if I press the addFile button 3 times and put in 3 files. It has all 3 lines as it should. If I then press the removeFile button on the first or second line, the second line is correct on the left, but the 3rd file input was removed, not either of the first two.

例如,如果我按下addFile按钮3次并输入3个文件。它应该有所有3条线。如果我然后按下第一行或第二行上的removeFile按钮,则第二行在左侧是正确的,但第三个文件输入被删除,而不是前两个中的任何一个。

How can I get this to remove lines as I would expect it to?

如何按照我的预期去除线条?

2 个解决方案

#1

I'm not sure of why it behave weird on you. It works just fine on this fiddle I made so please double check :)

我不确定为什么它对你表现得很奇怪。它在我制作的这个小提琴上工作得很好所以请仔细检查:)

I intentionally removed the track by and added examples to the code to show that it removes the one you clicked:

我故意删除了跟踪并在代码中添加了示例,以显示它删除了您单击的代码:

$scope.selectedFiles = [
    {file:'File1', fileDescription: 'First file'},
    {file: 'File2', fileDescription: 'Second file'},
    {file: 'File3', fileDescription: 'Third file'}
];
$scope.addFile = function() {
    $scope.selectedFiles.push({});
};
$scope.removeFile = function(index) {
    if(index >= 0) {
        $scope.selectedFiles.splice(index, 1);
    }
};

#2

Maybe try:

delete scope.selectedFiles[index];

#1