9

我正在编写一个简单的小文件上传器，我将输入文件放入$scope.files并通过 ajax 调用上传，然后成功后我将$scope.files转向$scope.successfulUploads对象。我想在successfulUploads设置了值后立即显示内联列表，它与$scope.files对象一起使用，并且控制台$scope.successfulUploads按应有的方式显示。我只需要写一个可观察的，如果你愿意的话。

这是我的代码：

控制器

$scope.files = [];
$scope.successfulUploads = [];

$rootScope.$on('upload:success', function() {
    //console.log('Controller: on `success`');
    for (var i = 0; i < $scope.files.length; i++) {
        $scope.successfulUploads.push($scope.files[i]);
    }
    $scope.files = [];
    console.log('successfulUploads: ' + $scope.successfulUploads);
});

HTML：

<span class="span2 btn btn-success fileinput-button">
    <span>Add Files</span>
    <input type="file" multiple ng-model="files" file-change>
</span>
<table class="table table-hover table-striped">
    <tbody>
        <tr ng-repeat="file in successfulUploads">
            <td>{{file.name}}</td>
            <!--<td><a href="#" class="btn btn-danger">Delete</a></td>-->
        </tr>
    </tbody>
</table>
<div class="muted text-left">Uploaded: {{ successfulUploads.length }}</div>
</div>

正如我所说，当我使用ng-repeat="file in files"它时效果很好。

在有人建议使用blueimps文件上传器之前，是的，它是一款外观精美、功能强大的文件上传器，但我需要它才能与我已经定义的 angular 模块一起使用，当我试图将其转换为停止工作时。今天我下载了完整的源代码并在我的本地主机上“按原样”运行它给了我同样的错误，我在截止日期前。也许以后我可以重温它。

4

1 回答 1

16

在第二个之后：

$scope.files = [];

添加：

$scope.$apply()

然后它应该工作。

于 2013-06-19T04:16:28.903 回答