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