löschen Sie eine Dateieingabe, die in einer ng-Wiederholung ist

Ich habe eine Reihe von Dateieingaben aus einem Array mit ng-Wiederholung generiert. Ich möchte die Eingabe nach dem Upload löschen können. Zum Beispiel war die hochgeladene Datei im Index 1 des Arrays. Ich möchte nicht, dass der Upload abgeschlossen ist. Ich möchte, dass die mit diesem Index (1) verknüpfte Dateieingabe gelöscht wird. Ich habe zuerst versucht, an das ng-Modell zu binden, aber das hat nicht funktioniert. Sollte ich $ Broadcast benutzen? Gibt es eine Möglichkeit, den Wert der Eingabe zu finden?löschen Sie eine Dateieingabe, die in einer ng-Wiederholung ist

/// <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>

Quelle

2016-09-12 Jesse

In der Upload-Funktion, sollten Sie den Index erhalten, die Sie wie so in den HTML-Code übergeben:

$scope.upload = function(index){ 

    ... 

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

}

Quelle

2016-09-12 18:42:22

Ich habe versucht, es zu löschen, ohne das DOM abfragt aber es scheint, als ob das der einzige Weg ist, es zu tun. Ich habe versucht, einen Verweis auf die Variable zu erhalten, die durch die Bindung erstellt wird, und eine leere Zeichenfolge daraus machen. – Jesse

löschen Sie eine Dateieingabe, die in einer ng-Wiederholung ist

Antwort

Verwandte Themen