角度-JSファイルアップロード

Question

MY htmlファイル：Upload.html

<tr ng-repeat="expenses in finalJson.comments"> 
<td > 
    <div class="image-upload"> 
    <label for="file-input"> 
     <img src="../images/upload1.jpg" style="width: 20px;"/>{{data.files[0].name}} 
    </label> 
    <input id="file-input" type="file" ng-model="expenses.files" ngf-select accept="*" value=""/> 
    </div> 
</td> 
</tr> 

コントローラ：UploadController アップロードが

するvar JSONをクリックされた後、私は、ファイル名を取得するために、これを使用しています= JSON.stringify（$ scope.finalJson.comments）; console.log（json）;

スクリーンショット：私は1つが、もっとして一つのファイルを追加していたとき、私は、コンソールで第二のファイル名を取得カント、その作業ファイルをファイルアップロード

。アップロードのクリックが行われた後すぐに多くのファイルを取得する方法を教えてください。

[{ 
    "index": 1, 
    "amount": "10", 
    "$$hashKey": "object:5", 
    "date": "2016-04-11", 
    "Category": "58", 
    "note": "wdxw", 
    "paid_to": "swdw", 
    "files": { 
     "webkitRelativePath": "", 
     "lastModified": 1450934331000, 
     "lastModifiedDate": "2015-12-24T05:18:51.000Z", 
     "name": "node-js.pdf", 
     "type": "application/pdf", 
     "size": 182649 
    } 
}, { 
    "$$hashKey": "object:31", 
    "date": "2016-04-05", 
    "Category": "60", 
    "note": "scds", 
    "paid_to": "dsad", 
    "amount": "20" 
}] 

Answer 1

NGリピート

HTMLコード内の使用このコードを：

<div ng-controller = "myCtrl"> 
    <div ng-repeat="fileInput in fileInputs"> 
     <input type="file" file-model="{{'myFile' + $index}}"/> 
     <button ng-click="uploadFile('myFile' + $index)">upload me</button> 
    </div> 
</div> 

コントローラーコード：

var myApp = angular.module('myApp', []); 

myApp.directive('fileModel', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model, modelSetter; 

      attrs.$observe('fileModel', function(fileModel){ 
       model = $parse(attrs.fileModel); 
       modelSetter = model.assign; 
      }); 

      element.bind('change', function(){ 
       scope.$apply(function(){ 
        modelSetter(scope.$parent, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}]); 

myApp.service('fileUpload', ['$http', function ($http) { 
    this.uploadFileToUrl = function(file, uploadUrl){ 
     var fd = new FormData(); 
     fd.append('file', file); 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .success(function(){ 
     }) 
     .error(function(){ 
     }); 
    } 
}]); 

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){ 
    $scope.fileInputs = [1,2,3]; 
    $scope.uploadFile = function(filename){ 
     var file = $scope[filename]; 
     console.log('file is ' + JSON.stringify(file)); 
     console.dir(file); 
     var uploadUrl = "http://httpbin.org/post"; 
     fileUpload.uploadFileToUrl(file, uploadUrl); 
    }; 

}]);