我正在尝试建立一个图像网格,当单击该图像时,该图像被隐藏在网格中,并显示在顶部。
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/