current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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:

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

Many thanks

share|improve this question
    
You have to supply some code and html... –  Yngve B. Nilsen yesterday
    
hi, thanks for the update, the code provided :) –  Oron Ben-David yesterday

2 Answers 2

up vote 1 down vote accepted

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.

share|improve this answer
    
Hi Gal, Thanks!!! great solution! :) –  Oron Ben-David 16 hours ago
up vote 0 down vote

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.

share|improve this answer
    
hi, thanks for the update, still looking for a solution. –  Oron Ben-David yesterday

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.