AngularJS - upload and display image using ng-repeat and jQuery

Question

I'm trying to upload and display image inside ng-repeat.

I've succeeded to upload and display image without ng-repeat using jquery function:

<html>
<head>
        <script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<input type='file' />
<img id="myImg" ng-src="#" alt="your image" style="width:50px;height:50px"/>
</body>
</html>
...
<script>
$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};
</script>

if i change the code to be inside ng-repeat, the jQuery function dosent work:

<div ng-repeat="step in stepsModel">
 <input type='file' />
 <img id="myImg" ng-src="#" alt="your image" style="width:50px;height:50px"/>
/div>

2 questions:

how can i change the jquery function to angular function?
how can i make the ng-reapeat deal with the jquery function?

Many thanks

You have to supply some code and html...

Yngve B-Nilsen
– Yngve B-Nilsen

2014-10-08 10:51:11 +00:00
Commented Oct 8, 2014 at 10:51 — Yngve B-Nilsen
– Yngve B-Nilsen, Commented Oct 8, 2014 at 10:51

Gal Weissman · Accepted Answer · 2014-10-08 22:33:14Z

Your code is "slightly" problematic in many aspects. It seems like you're new to AngularJS - so, welcome.

While referring to your code, it looks like stepsModel is a variable that is relative to your current $scope. When $scope.sepsModel is updated, Angular's data binding will take charge and keep your HTML updated with your new data: https://docs.angularjs.org/tutorial/step_04

As for your question, your goal should be to add an image into $scope.stepsModel upon upload. $scope.stepsModel will be auto overviewed in the HTML with all the uploaded images.

It is somehow unnecessary to use jQuery for the purpose you intended. Just so you could learn better and for the good spirit I've made a suggestion on how it should be done, using your own state of mind:

http://jsfiddle.net/kkhxsgLu/2/

    $scope.imageUpload = function(element){
    var reader = new FileReader();
    reader.onload = $scope.imageIsLoaded;
    reader.readAsDataURL(element.files[0]);
}

$scope.imageIsLoaded = function(e){
    $scope.$apply(function() {
        $scope.stepsModel.push(e.target.result);
    });
}

Good luck.

Omar Enrico Polo · Accepted Answer · 2014-10-08 10:56:03Z

0

I think you need to create a service (see this ) and put your jQuery code into that service. For the second question I ask you tu show us the code.

answered Oct 8, 2014 at 10:56

Omar Enrico Polo

3411 silver badge5 bronze badges

1 Comment

Oron Bendavid Over a year ago

hi, thanks for the update, still looking for a solution.

Collectives™ on Stack Overflow

AngularJS - upload and display image using ng-repeat and jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related