CODEWITHSUNDEEP
javascriptangularjs
Sebastian Bochan
Sebastian Bochan

Reputation: 37578

How to refer to particular variable in scope, using ng-repeat

I have something like this in the view:

<div ng-repeat="thread in threads">
    <div id="conversation-{{thread.id}}">
         <img src="{{ imageloader.image }}"/>
    </div>
</div>

and in the controller (imageloader) function which set 

imagesloader.image = 'path/to/image';

I need to refer only for particular imageloader.image not all of them, from all boxes. Because at this moment (i.e when I have 10 divs), and run controller function then image show up in all divs from repeat. Any ideas?

Upvotes: 0

Views: 87

Answers (2)

Todd
Todd

Reputation: 5454

Maybe you've answered your own question by now, but I just got back to it, See if this is what you need.

Check this out: JS FIDDLE

html

<div ng-app ng-controller="ImageCtrl" ng-init="images = [
  {title: 'kitty 1', url: 'http://aasdfasdf.my.imadge/f1'},
  {title: 'kitty 2', url: 'http://aasdfasdfb.my.image/f1'},
  {title: 'kitty 3', url: 'http://aasdfasfffdf.my.imagde/f1'}]">
      <div ng-repeat="(imageIndex, image) in images">
          <p>
              image: <i> {{image.title}} </i>
              <a href="#" ng-click="showImage(imageIndex)">Show Image</a>
          </p>
          <img src="http://placekitten.com/g/200/200" ng-show="isShowing(imageIndex)" alt="{{image.title}}" />
      </div>
</div>

js

function ImageCtrl($scope) {
    $scope.activeImageIndex;

    $scope.showImage = function(index) {
        $scope.activeImageIndex = index;
    };

    $scope.isShowing = function(index){
        return  $scope.activeImageIndex === index;
    };
};

Should be pretty easy... Just hope I understood correctly. lol.

Upvotes: 0

Dennis Weidmann
Dennis Weidmann

Reputation: 1967

I hope I understood you right...

I think best solution would be to add the path of the images as property to the threads array, then replace this

<img src="{{ imageloader.image }}"/>

with that

<img src="{{ thread.imageProperty }}"/>

Now if you want to change, or refer to one special image, you can get, or set your arrays image property, what will also affect the visible image on your website...

That way you can get/set a specific image by changing your array...

So you have one "datasource" per image instead of one "datasource" for all images

Upvotes: 1

Related Questions