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!

I don't think you can use (x,y) in z syntax in ng-repeat - instead just use ng-repeat="image in images" and then use the $index variable, which is available inside an ng-repeat, as the replacement for your current id. — jraede
– jraede, Commented May 9, 2014 at 21:04
Do I use $index in ng-click="clicked($index)" or is it used in my function? — user3621884
– user3621884, Commented May 9, 2014 at 21:08
Use clicked($index) and in your function you can keep id as is. — jraede
– jraede, Commented May 9, 2014 at 21:44

nilsK · Accepted Answer · 2014-05-09 22:28:13Z

4

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>

edited May 9, 2014 at 22:28

answered May 9, 2014 at 21:21

nilsK

4,3512 gold badges28 silver badges40 bronze badges

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

4 Comments

user3621884 Over a year ago

Still no luck any other thoughts? I'm stumped.

user3621884 Over a year ago

Pretty sure. Check it out lightboxtest.myshopify.com click on the image of Richard Sherman

user3621884 Over a year ago

I just don't think my click is being registerd

nilsK Over a year ago

@user3621884 switch back to your first ng-repeat expression. i edited my post

Alagarasan M · Accepted Answer · 2014-06-18 08:42:01Z

0

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];

};

answered Jun 18, 2014 at 8:42

Alagarasan M

9078 silver badges16 bronze badges

Comments

TyndieRock · Accepted Answer · 2014-05-09 21:15:07Z

-1

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

answered May 9, 2014 at 21:15

TyndieRock

9968 silver badges10 bronze badges

5 Comments

user3621884 Over a year ago

Any thoughts ExpertSys?

TyndieRock Over a year ago

Sorry that didn't work, @ExpertSystem I don't know how that could be considered unrelated as that could produce the exact symptoms. Can you verify that the contents of selected are being updated on click?

gkalpak Over a year ago

@TyndieRock: src="{{...}}" will work fine as sson as Angular kicks in and replaces the template. So, it could not produce the symptoms.

user3621884 Over a year ago

I don't think they are. Is their anyway to check for certain?

jraede Over a year ago

This is definitely not the issue.

Collectives™ on Stack Overflow

AngularJS ng-repeat ng-click

3 Answers 3

4 Comments

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

5 Comments

Related