1

尝试找出使用 ng-file-upload 时能够删除文件的最佳方法。我得到了带有列表的文件列表。我的html是：

<div>
    <p>Files:</p>
</div>
<div>
    <ul>
        <li ng-repeat="f in files" style="font:smaller">{{f.name}} {{f.$error}} {{f.$errorParam}}</li>
    </ul>
</div>

在我的控制器中，我有：

$scope.$watch('files', function () {
    $scope.upload($scope.files);
});
$scope.$watch('file', function () {
    if ($scope.file != null) {
        $scope.files = [$scope.file];
    }
});
$scope.log = '';


$scope.upload = function (files) {
    if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          var file = files[i];

          if (!file.$error) {

            Upload.upload({
                url: (serviceBase + 'api/ppt/docs/upload/multi?transId=' + [$scope.transId]),
                data: {
                  username: $scope.username,
                  file: file,
                  filename: file.name
                }
            }).progress(function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                $scope.log = 'progress: ' + progressPercentage + '% ' +
                            evt.config.data.file.name + '\n' + $scope.log;
            }).success(function (data, status, headers, config) {
                $timeout(function() {
                    $scope.log = 'file: ' + config.data.file.name + ', Response: ' + JSON.stringify(data) + '\n' + $scope.log;
                });
            }).error(function(data, status, headers, config) {

                var errors = [];
                $scope.errors = data;

                for (var i=0; i<$scope.errors.length; i++)
                {
                    errors.push($scope.errors[i].errMsg);
                }

                $scope.message = "Error uploading files due to: " + errors.join(' ');
            });
          }
        }
    }
};

我在文档中看到了一些示例，但没有看到实现的最佳方法，特别是如果我希望为每个上传的文件而不是全部文件单独删除/删除。

非常感谢。

4

1 回答 1

3

我想直接的方法在这里就行了。

  1. 将deleteFile处理程序添加到您的范围，获取被删除文件的数组索引。
  2. 为每个文件添加一个链接/按钮/句柄以在单击并设置它的属性时将其删除ng-click="deleteFile($index)。$index由创建ng-repeat。
  3. 在您的 deleteFile 处理程序中调用后端以删除文件，并在成功拼接files数组以删除已删除的条目。

HTML：

<li ng-repeat="f in files">
     {{f.name}} {{f.$error}} {{f.$errorParam}} <a class="deleteHandle" ng-click="deleteFile($index)">&times;</a>
</li>

JS：

$scope.deleteFile = function(idx) {
     var file = $scope.files[idx];
     if (file.isUploaded) {
          $http.delete('/api/files/'+file.id).then(function(response){
               if (response.status == 200) {
                    $scope.files.splice(idx, 1);
               }
         });
      } else {
           $scope.files.splice(idx, 1);
      }
}
于 2015-11-17T01:26:02.433 回答