javascript - clear a file input that is in an ng-repeat -
i have set of file inputs being generated array ng-repeat. able clear input after upload has been completed. example uploaded file @ index 1 of array. not upload complete file input associated index (1) cleared. tried binding ng-model @ first didn't work. should use $broadcast?? there way find the value of input?
/// <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 clear 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 app"> <div class="repeat" ng-repeat="item in app.ff track $index"> <input type="file" file-upload index="{{$index}}"> <input type="button" ng-click="upload($index)" value="upload"> </div> </div> </body> </html>
in upload function, should index passing in html so:
$scope.upload = function(index){ ... formdata.append("file", filefactory.uploads[index].file); formdata.append("file", filefactory.uploads[index].filename); } 
Comments
Post a Comment