AngularJs - 在NG-重複文件選擇

我愉快地使用從溶液@雪人的答案文件選擇到this question AngularJs - 在NG-重複文件選擇

但是現在，我想在ng-repeat循環中使用它，我堅持。

我從這個問題複製解決方案的自由：

angular 
    .module('app.services') 
    .directive('fileChange', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     handler: '&' 
    }, 
    link: function (scope, element) { 
     element.on('change', function (event) { 
     scope.$apply(function(){ 
      scope.handler({files: event.target.files}); 
     }); 
     }); 
    } 
    }; 
}); 

<input type="file" file-change handler="fileSelect(files)"> 

$scope.fileSelect = function(files) { 
    var file = files[0]; 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
    console.log("on load", e.target.result); 
    } 
    reader.readAsText(file); 
}

如何指示剛剛度過它的文件中選擇哪張照片的$scope.fileSelect()功能？

[更新]唉！我只是意識到我沒有把這個問題弄清楚。我需要的文件名，和從重複一些其他數據。比方說，我想要一個文件名和圖像的說明，由用戶輸入。

因此，我宣佈

$scope.image = {'fileName' : '', 
       'description' : ''}; 

$scope.images = []; // array of $scope.image

而且，在HTML中，ng-repeat，我會說我不（僅僅是僞代碼）

<ng-repeat image in images> 
    <input type="text" ng-model="image.description"/> 
    <input type="file" file-change handler="fileSelect(files)">

這是最後<input>知道如何編碼。理想情況下，我想將image對象傳遞給file-change handler函數。

我該怎麼做？

[最終更新]以防萬一誰讀這個&發現它很有趣。

<ng-repeat image in images> 
    <input type="text" ng-model="image.description"/> 
    <input type="file" file-change handler="fileSelect(image , files)">

在控制器中加入一個image參數，並且還$scope.fileSelect(image , files)。需要注意的是沒有變化被要求的指令。

作品像一個魅力

來源

2017-08-29 Mawg

我在這裏嘗試了一些差異，它的工作。我唯一改變的是我添加的測試控制器。

檢查我是如何做的：（點擊運行代碼片段，看看它在行動）

angular 
 
    .module('app.services', []) 
 
    .controller('TestController', function($scope) { 
 
    $scope.inputs = [1,2,3,4]; 
 
    
 
    $scope.fileSelect = function(files) { 
 
     var file = files[0]; 
 
     var reader = new FileReader(); 
 
     
 
     reader.onload = function(e) { 
 
     console.log("on load", e.target.result); 
 
     } 
 
     
 
     reader.readAsText(file); 
 
    } 
 
    }) 
 
    .directive('fileChange', function() { 
 
    return { 
 
    restrict: 'A', 
 
    scope: { 
 
     handler: '&' 
 
    }, 
 
    link: function (scope, element) { 
 
     element.on('change', function (event) { 
 
     scope.$apply(function(){ 
 
      scope.handler({files: event.target.files}); 
 
     }); 
 
     }); 
 
    } 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Angular test</title> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 
</head> 
 
<body ng-app="app.services"> 
 

 
<div ng-controller="TestController as ctrl"> 
 
    <input type="file" 
 
     file-change 
 
     handler="fileSelect(files)" 
 
     ng-repeat="input in inputs"> 
 
</div> 
 

 
</body> 
 
</html>

只是一個快速注：根據您的機器上，在執行console.log您正在運行的可以去很慢（因爲它的日誌文件的內容）

來源

2017-08-30 05:43:36

它是不是經常，我看到這樣的神，詳細的解答，從一個新的傢伙命令（歡迎登機），所以我願買電子健康我獎勵100點獎勵。謝謝。它當然工作得很好，所以我會想法如何適應我的代碼。 – Mawg

啊！我只是意識到我沒有把這個問題弄清楚。請參閱更新。如果很容易，請讓我們知道;否則，我會發佈一個新的，更清晰的問題。我的道歉，並且在系統允許的情況下，我仍然會在2天內給您獎勵 – Mawg

我明白了，感謝您的幫助。我更新了問題以給出答案。期待您的賞金在2天時間內:-) – Mawg

AngularJs - 在NG-重複文件選擇

回答

相關問題