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

编辑：我吮吸了plunker;）

无论如何：像你在第一个例子中那样使用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而是将索引值传递为

纳克单击=＆＃34;点击（$指数）＆＃34;

在控制器中，

$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将知道需要更新图像

AngularJS ng-repeat ng-click

3 个答案: