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-重复文件选择

回答

相关问题