AngularJS ng-repeat ng-click

Question

I am trying to have a grid of images, when clicked the image is hid from the grid and shown featured at the top.

HTML:

    <div ng-controller="imageCtrl">
      <div class="row">
        <img ng-show="selected" src="{{selected.img}}" alt="">
        <p ng-show="selected">{{selected.des}}</p>
      </div>
      <div class="row">
        <div ng-repeat="(id, image) in images" class="col-sm-4">
          <a ng-click="clicked(id)"><img src="{{image.img}}" alt=""></a>
        </div>
      </div>
    </div>

And my controller:

light.controller('imageCtrl', function($scope){
  $scope.images = [{img: '',des: ''},{img: '',des: ''},{img: '',des: ''}];
  $scope.selected = $scope.images[0];
  $scope.clicked = function(id){
    selected = $scope.images[id];
};

});

Currently the first image is shown but when I click on other images nothing happens. Anybody have any tips as to what I'm doing wrong? Thank You!

Answer 1

you'll need to set $scope.selected not selected

$scope.clicked = function(id){
   $scope.selected = $scope.images[id];
}

EDIT: i suck at plunker ;)

anyways: use ng-repeat as you did in your first example and it should work

<div ng-repeat="(id, image) in images" class="col-sm-4">
   <a ng-click="clicked(id)"><img src="{{image.img}}" alt=""></a>
</div>

Answer 2

Try this:

In html, instead of passing id pass the index value as

ng-click="clicked($index)"

In the controller,

$scope.clicked = function(Index){
$scope.selected = $scope.images[Index];

};

Answer 3

Use this instead:

<img ng-show="selected" ng-src="{{selected.img}}" alt="">

Use ng-src={{selected.image}} in your image tag instead of just src={{selected.image}}. Angular will know it needs to update the image if the model its pointing to has been updated