Question

我有数据，我使用ng-repeat列出数据。每行都有一个浏览图像。我的问题是当我浏览图像时，图像显示在不应该的所有行中。它应该显示在一行。请帮忙。

这是我的小提琴链接： http://jsfiddle.net/DharkRoses/m2qagzzk/2/

小提琴中的示例代码：

angular.module（'test'，[]）;

angular.module（ '试验'） .controller（'UploadCtrl'，function（$ scope，$ timeout）{

$scope.thumbnail = {
    dataUrl: 'adsfas'
};
$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files) {
    if (files != null) {
        var file = files[0];
        if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
            $timeout(function () {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function (e) {
                    $timeout(function () {
                        $scope.thumbnail.dataUrl = e.target.result;
                    });
                }
            });
        }
    }

Answer 1

每个迭代行需要单独dataUrl行。例如，您可以使用$index变量：

<img ng-src="{{ thumbnail[$index].dataUrl }}" height="50px" />

和JS部分：

$scope.thumbnail = {
    dataUrl: []
};

$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files, index) {
    if (files != null) {
        var file = files[0];
        var index = this.$index;
        if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
            $timeout(function () {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onload = function (e) {
                    $timeout(function () {
                        $scope.thumbnail[index] = {dataUrl: e.target.result};
                    });
                }
            });
        }
    }
};

演示： http://jsfiddle.net/m2qagzzk/3/

在ng-repeat row angularjs中上传图像

1 个答案: