Angular js在点击图库中的照片以显示模态时检测索引

Angular js detect index when click on a photo from gallery to display a modal

本文关键字:显示 照片 模态 索引 检测 js Angular      更新时间:2023-09-26

我的项目是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);
}