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()機能に指示するにはどうすればよいですか？

[更新] Aargh！私は疑問を十分にはっきりさせていないことに気付いた。私はファイル名が必要ですとリピートのいくつかの他のデータ。ファイル名をとに入力したいとします。

だから、私はng-repeatで、HTMLで、

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

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

を宣言している、私は私はしないでください（のみ擬似コード）それは最後の<input>だ

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

を持っていますコード方法を知っている。理想的には、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のリピート

答えて

関連する問題