If I want to delete a specific image from multiple uploads by clicking on the image in AngularJS, how can I achieve this? Each uploaded image has an associated textbox. When the delete icon on the image is clicked, both the image and the corresponding textbox should be removed. My view code is as follows:
<input type="file" multiple file-upload /> {{files.length}}
<div ng-repeat="step in files">
<img ng-src="{{step.src}}" />
<input type="text" ng-model="comment[$index]"><br>
<input type="button" onclick="removeImage($index)" value="delete">
</div>
Below is my Angular controller code:
app.directive('fileUpload', function() {
return {
scope: true,
link: function(scope, el, attrs) {
el.bind('change', function(event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
scope.$emit("fileSelected", { file: files[i] });
}
});
}
};
});
$scope.files = [];
$scope.$on("fileSelected", function(event, args) {
var item = args;
$scope.files.push(item);
var reader = new FileReader();
reader.addEventListener("load", function() {
$scope.$apply(function() {
item.src = reader.result;
});
}, false);
if (item.file) {
reader.readAsDataURL(item.file);
}
});