清除ng-repeat中的文件輸入

我有一組使用ng-repeat從數組中生成的文件輸入。我希望能夠在上傳完成後清除輸入。例如，上傳的文件位於數組的索引1處。我不會說上傳完成我希望清除與該索引（1）關聯的文件輸入。起初，我試圖綁定到ng模型，但沒有奏效。我應該使用$廣播嗎？有辦法找到輸入的值嗎？清除ng-repeat中的文件輸入

/// <reference path="../typings/tsd.d.ts" /> 
 
var app = angular.module("app", []); 
 

 
app.controller("AppCtrl", function($scope, $q, FileFactory){ 
 
    var ctrl = this; 
 

 
    ctrl.ff = FileFactory; 
 
    
 
    $scope.upload = function(){ 
 
     
 
     var defer = $q.defer(); 
 
     
 
     defer.promise(function(data){ 
 
      
 
      
 
     }) 
 

 
     var http = new XMLHttpRequest(); 
 

 
     var formData = new FormData(); 
 

 
     formData.append("file", FileFactory.uploads[$scope.index].file); 
 
     formData.append("file", FileFactory.uploads[$scope.index].fileName); 
 

 
     http.open("POST", "upload.cfc?method=upload"); 
 

 
     http.addEventListener("load", function(){ 
 

 
      if(this.status = 200){ 
 

 
       // code to clear the input? 
 

 
      } 
 

 
     }) 
 

 
     http.send(formData); 
 
     
 
    } 
 

 
}) 
 

 
.factory('FileFactory', function(){ 
 

 
    var uploads = [ 
 
     { file:null, fileName:null, }, 
 
     { file:null, fileName:null, }, 
 
     { file:null, fileName:null, } 
 
    ]; 
 

 
    return uploads; 
 

 
}) 
 

 
.directive('fileUpload', function(FileFactory){ 
 

 
    return { 
 
     scope:{ 
 
      fileUpload:"=", 
 
      index:"@" 
 
     }, 
 
     restrict:"A", 
 
     link:function(scope, element, attr, ctrl){ 
 

 
      element.bind('change', function(e){ 
 

 
       FileFactory.uploads[scope.index].file = e.target.files[0]; 
 
       FileFactory.uploas[scope.index].fileName = e.target.files[0].name; 
 

 
      }) 
 

 
     } 
 
    } 
 

 
}) 
 

 

 
document.addEventListener("DOMContentLoaded", function(){ 
 

 
    angular.bootstrap(document.querySelector('html'), ['app']); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
 
    <script src="bower_components/angular/angular.min.js"></script> 
 
    <script src="ts/app.js"></script> 
 
</head> 
 
<body> 
 
<div ng-controller="AppCtrl as app"> 
 
    <div class="repeat" ng-repeat="item in app.ff track by $index"> 
 
     <input type="file" file-upload index="{{$index}}"> 
 
     <input type="button" ng-click="upload($index)" value="upload"> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-09-12 Jesse

在你上傳功能，你應該要傳遞的HTML像這樣的指標：

$scope.upload = function(index){ 

    ... 

    formData.append("file", FileFactory.uploads[index].file); 
    formData.append("file", FileFactory.uploads[index].fileName); 

}

來源

2016-09-12 18:42:22

我試圖清除它無需查詢DOM，但這似乎是唯一的方法來做到這一點。我試圖獲取對綁定創建的變量的引用，並將其設置爲空字符串。 – Jesse

清除ng-repeat中的文件輸入

回答

相關問題