Question

我正在使用ng-repeat进行基于角度1.6的图像上传，注意输入不是多个，但是有多个ng重复输入，我有图像预览工作以及添加线/删除线，唯一似乎不起作用的是如果我删除文件输入不更新的项目（我有正确更新预览的代码）。以下是我的工作内容：

<div ng-repeat="item in data.items track by $index">
    <input ng-model="item.fileinput" type="file" name="image_{{$index}}" id="image_{{$index}}" onchange="angular.element(this).scope().imageChoose(this)"/><i ng-click="removeEvent($index)" class="fa fa-trash fa-lg"></i>
    <img ng-if="!item.thumb" class="preview-image-small" ng-src="/images/general/placeholder.jpg"</img>
    <img ng-if="item.thumb" class="preview-image-small" ng-src="{{item.thumb}}"</img>
</div>

然后在我的控制器中我处理imageChoose如下：

$scope.imageChoose = function (data) {
var id = data.id.split("_");
id = id[id.length-1];
var elem = document.getElementById(data.id);
if (typeof (FileReader) != "undefined") {
    var reader = new FileReader();
    reader.onload = function (e) {
    $scope.$apply(function() {
        $scope.data.data.items[id].thumb = e.target.result;
    });
    };
    reader.readAsDataURL(elem.files[0]);
} else {
    alert("This browser does not support FileReader.");
}
};

这正确设置了图像预览，当我在一行上运行删除时，由于event.thumb的ng-src，它们正确地重新排序。问题是实际的文件输入没有绑定或更新，这里是删除行的代码：

$scope.removeEvent = function (index) {
$scope.data.items.splice(index, 1);
};

我希望有一种相对简单的方法来绑定输入或处理删除，以便输入保持正确。提前感谢任何想法。

Answer 1

由于removeEvent与ng-repeat一起使用，您的track by $index方法无效。 This is a known side effect。尝试使用different track by expressions删除它。

使用预览输入绑定

1 个答案: