Angular js在点击图库中的照片以显示模态时检测索引
Angular js detect index when click on a photo from gallery to display a modal
我的项目是AngularJs,我有一张图库照片,当我点击一张图片时,我有了一个包含所有图片的模态。
但我的问题是:如何从照片库中检测图像的索引,以在模态的开始点击时显示图像?
我的代码:
<div class="item_scroll_dek jq-item-sz" ng-repeat="im in sizeImage" ng-class="{active : $last}"
ng-style="{'background': 'url('+im.image+') no-repeat center transparent', 'background-size': ''+im.x+' '+im.y+''}"
ng-click="openGallery(userprofile.profile.images)">
</div>
<script type="text/ng-template" id="popupTmplGallery.html">
<div class="modal-body">
<div id="Carousel" class="carousel slide" ng-show="isBusiness" >
<ol class="carousel-indicators">
<li data-target="Carousel" data-slide-to="$index" ng-repeat="im in userprofile.profile.images track by $index" ng-class="{active : $first}"></li>
</ol>
<div class="carousel-inner carousel-inner-css">
<div class="item" ng-repeat="im in galeryProfilBusiness track by $index" ng-class="{active : $first}">
<img style="width: 100%;" ng-src="{{getImages(im)}}" class="img-responsive">
</div>
</div>
<a class="left carousel-control carousel-control-left" href="#Carousel" ng-non-bindable data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control carousel-control-right" href="#Carousel" ng-non-bindable data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
$scope.openGallery = function (images) {
var modalInstance = $modal.open({
templateUrl: 'popupTmplGallery.html',
controller: 'ModaleCtrl',
scope: $scope ,
resolve: {
items: function ()
{
return images;
}
}
});
modalInstance.result.then(function (test)
{
console.log(test);
},
function ()
{
console.log('testing');
});
};
请帮助我
也许您可以在ng-repeat
上使用track by $index
。然后,您可以将索引作为参数传递给ng-click
。
<div class="item_scroll_dek jq-item-sz" ng-repeat="im in sizeImage track by $index" ng-class="{active : $last}"
ng-style="{'background': 'url('+im.image+') no-repeat center transparent', 'background-size': ''+im.x+' '+im.y+''}"
ng-click="openGallery($index)">
或者你可以像这样传递整个图像对象:
<div class="item_scroll_dek jq-item-sz" ng-repeat="im in sizeImage track by $index" ng-class="{active : $last}"
ng-style="{'background': 'url('+im.image+') no-repeat center transparent', 'background-size': ''+im.x+' '+im.y+''}"
ng-click="openGallery(im)">
在你的代码背后,你可以找到underscore.js.的索引
$scope.openGallery = function(image){
var index = _.indexOf(sizeImage, im);
}
相关文章:
- 为什么缩放按钮不会显示在照片擦除中
- 使用漂亮的照片点击另一个元素显示图像
- JS照片库.使大图像显示和缩略图可单击
- 灯箱只显示第一张照片
- 在鼠标悬停时显示不同的大照片
- 鼠标悬停显示 Lightbox2 和 Milkbox 照片的 HTML
- 背景图像旋转器.php + jQuery每4秒显示一次随机照片
- 通过登录和在线照片显示上传照片的工作流程
- Jquery 动画第二张照片未显示
- 如何在不使用数据的情况下上传本地照片并将其显示在html小部件上
- 在谷歌位置api的侧边栏中显示照片
- 使用javascript api显示来自facebook的照片
- 显示用户'网站上的Instagram照片
- 如何显示节点属性,如person's的姓名、照片和地址
- Instagram传单在地图上显示照片
- 我如何显示照片从谷歌的地方照片api在html中使用javascript
- 显示照片
- Javascript:在网络浏览器中显示照片之前,是否可以捕获多张照片
- 不要在漂亮照片中显示照片两次
- 在旋转滑块中显示照片