我正在尝试建立一个图像网格,当单击该图像时,该图像被隐藏在网格中,并显示在顶部。

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>


而我的控制器:

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


});

当前显示第一个图像,但是当我单击其他图像时,没有任何反应。有人对我做错了什么提示吗?谢谢!

最佳答案

您需要设置$scope.selected而不是selected

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


编辑:我吮吸punker;)

无论如何:像在第一个示例中一样使用ng-repeat,它应该可以工作

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

关于javascript - AngularJS ng-repeat ng-click,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23573837/

10-12 07:41
查看更多