[英]AngularJS ng-repeat ng-click
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: 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!
谢谢!
you'll need to set $scope.selected
not selected
您需要设置
$scope.selected
未selected
$scope.clicked = function(id){
$scope.selected = $scope.images[id];
}
EDIT: i suck at plunker ;) 编辑:我吮吸punker;)
anyways: use ng-repeat as you did in your first example and it should work 无论如何:像在第一个示例中一样使用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>
Try this: 尝试这个:
In html, instead of passing id pass the index value as 在html中,不传递id而是传递索引值作为
ng-click="clicked($index)" NG-点击= “点击($指数)”
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}}. 在图片标签中使用ng-src = {{selected.image}},而不是src = {{selected.image}}。 Angular will know it needs to update the image if the model its pointing to has been updated
如果指向其的模型已更新,Angular将知道需要更新图像
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.