javascript - AngularJS ng-repeat ng-click - Stack Overflow

admin管理员组

文章数量:1417070

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 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!

• javascript
• angularjs
• scope
• angularjs-ng-click

Share Improve this question Follow asked May 9, 2014 at 20:56 user3621884user3621884 2111 silver badge22 bronze badges 4

• 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 Commented May 9, 2014 at 21:04
• Do I use $index in ng-click="clicked($index)" or is it used in my function? – user3621884 Commented May 9, 2014 at 21:08
• Use clicked($index) and in your function you can keep id as is. – jraede Commented May 9, 2014 at 21:44
• But, @nilsK's answer is the correct one. – jraede Commented May 9, 2014 at 21:44

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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>

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

};

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

本文标签： javascriptAngularJS ngrepeat ngclickStack Overflow