Angular JS and Ionic - Change img src dynamically from ng-repeat

Question

I have a ng-repeat directive to show 6 pictures. I do an AJAX call to get the photos from the server to the app. All the data is stored in a scope var called vendor data. Then, in HTML code I do an ng-repeat to show the pictures. There is a button below each picture to take another from the gallery and change it. Here is the code:

HTML code

   <div ng-repeat="photo in vendordata.galerias" class="elemento">
        <div style="z-index: 10;">
          <img class="thumb" ng-src="{{photo.url}}" />
        </div>
        <div class="" style="text-align: center;">
          <button class="" href="#" ng-click="changePic($index)">Change picture</button>
        </div>
      </div>
    </div>

Controller Code:

$scope.changePic = function(identifier){
    $scope.elementSek = identifier;
    $scope.getPhoto(pictureSource.PHOTOLIBRARY);
};
$scope.getPhoto = function (source) {
  // Retrieve image file location from specified source
  navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
    destinationType: destinationType.FILE_URI,
    sourceType: source });
};
function onPhotoURISuccess(imageURI) {
  // Get image handle
  $scope.vendordata.galerias[$scope.elementoSek].url = imageURI;
}
// Called if something bad happens.
//
function onFail(message) {
  console.log('Failed because: ' + message);
}

The var has the correct value, before and after the change. But the img don't updates the selected picture. How can I update it?

Have you tried wrapping the $scope.vendordata.galerias[$scope.elementoSek].url = imageURI; into a $scope.$apply ? — nubinub
– nubinub, Commented Jan 26, 2016 at 12:20
Before selecting new picture it returns http://domain.com/galleries/picture.jpg, after the change it returns file://path_to_new_file.jpg — Programador Adagal
– Programador Adagal, Commented Jan 26, 2016 at 12:22
It works @nubinub, please, add an answer in order to mark it as correct and give +1 to you. And thanks a lot! — Programador Adagal
– Programador Adagal, Commented Jan 26, 2016 at 17:00

nubinub · Accepted Answer · 2016-01-27 12:03:18Z

2

function onPhotoURISuccess(imageURI) {
  // Get image handle
  $scope.$apply(function(){
    $scope.vendordata.galerias[$scope.elementoSek].url = imageURI;
  });
}

Since the navigator.camera.getPicturefunction you are using is not part of angular, you need to wrap the callback into a $scope.$apply in order to trigger a $digestcycle which will make your model changes effective on the view.

answered Jan 27, 2016 at 12:03

nubinub

1,9382 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Programador Adagal Over a year ago

Thanks a lot for your help @nubinub it works perfectly.

Collectives™ on Stack Overflow

Angular JS and Ionic - Change img src dynamically from ng-repeat

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related