Angular ng-file-upload delete

Question

嘗試在使用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(' ');
            });
          }
        }
    }
};

我在文檔中看到了一些示例，但沒有看到實現的最佳方法，特別是如果我希望對每個上傳的文件進行單獨的刪除/刪除，而不僅僅是所有文件。

非常感謝。

Answer 1

我想這個直截了當的做法會在這里做。

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);
      }
}