Question

我正在编写一个简单的小文件上传器，我将输入文件放入$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文件上传器之前，是的，它是一个很棒的文件上传器，具有很强的功能，但是我需要这个才能使用我已定义的角度模块，当我尝试使用它时转换它停止工作。今天我下载了完整的源代码并在我的localhost上“按原样”运行它它给了我同样的错误，我在截止日期。也许在以后我可以重温它。

Answer 1

在第二次之后：

$scope.files = [];

添加：

$scope.$apply()

然后它应该工作。

范围对象在内部将值更改为控制器范围时更新UI

1 个答案: