AngularJS ng-repeat ng-click

Question

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

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

}）;

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

Answer 1

您需要设置$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>

Answer 2

尝试这个：

在html中，不传递id而是传递索引值作为

NG-点击= “点击（$指数）”

在控制器中

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

};

Answer 3

使用此代替：

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

在图片标签中使用ng-src = {{selected.image}}，而不是src = {{selected.image}}。 如果指向其的模型已更新，Angular将知道需要更新图像