angular双重for循环得到的两行三列图片每个图片上有数量不一的坐标如何点击当前图片把当前图片传到另外一个盒子里包括图片身上的坐标点
可以使用指令来实现该功能。首先在HTML模板中使用双重for循环来展示图片和坐标点信息:
<div ng-repeat="row in rows" class="row">
<div ng-repeat="image in row" class="col">
<img ng-src="{{image.src}}" ng-click="selectImage(image)">
<ul>
<li ng-repeat="point in image.points">{{point}}</li>
</ul>
</div>
</div>
在控制器中定义selectImage函数来处理图片的选中事件,并在页面中添加一个用来显示选中图片的盒子:
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.rows = [
[{src: 'image1.jpg', points: [1, 2, 3]}, {src: 'image2.jpg', points: [4, 5, 6]}, {src: 'image3.jpg', points: [7, 8, 9]}],
[{src: 'image4.jpg', points: [10, 11, 12]}, {src: 'image5.jpg', points: [13, 14, 15]}, {src: 'image6.jpg', points: [16, 17, 18]}]
];
$scope.selectedImage = null;
$scope.selectImage = function(image) {
$scope.selectedImage = image;
};
});
最后在页面中添加用来展示选中图片和坐标点信息的盒子:
<div class="selected-image">
<img ng-src="{{selectedImage.src}}" ng-show="selectedImage">
<ul ng-show="selectedImage">
<li ng-repeat="point in selectedImage.points">{{point}}</li>
</ul>
</div>
这样就可以实现点击图片选中并显示在另一个盒子中了。
原文地址: https://www.cveoy.top/t/topic/bh2q 著作权归作者所有。请勿转载和采集!