2016-09-12 7 views
0

ng-repeatを持つ配列からファイル入力のセットを生成しています。アップロードが完了したら入力をクリアしたいと思っています。たとえば、アップロードされたファイルが配列のインデックス1にあったとします。私はアップロードが完了していないと思いますが、そのインデックス(1)に関連するファイル入力をクリアしたいと思います。私は最初にng-modelにバインドしようとしましたが、うまくいきませんでした。私は$放送を使うべきですか?入力値を見つける方法はありますか?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>
アップロード機能で

答えて

1

は、あなたがそうのようなHTMLに渡しているインデックスを取得する必要があります

$scope.upload = function(index){ 

    ... 

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

} 
+0

私はDOMを照会せずに、それをクリアしようとしていたが、それがそれを行う唯一の方法だと思われます。私はバインディングによって作成されている変数への参照を取得しようとしていて、空の文字列にしました。 – Jesse

関連する問題