如何使用ng-repeat引用范围内的特定变量

Question

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 (ie when I have 10 divs), and run controller function then image show up in all divs from repeat. Any ideas?

Answer 1

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

Answer 2

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.