Bootstrap UI模式 - 为ng-repeat注​​入和初始化$ index

Question

目前我有一个像这样的图片库：

        <div class="slider">
            <img ng-repeat="image in gallery" class="img-responsive" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{image}}" ng-click="open($index)"/>

            <a class="arrow prev" ng-click="showPrev()"></a>
            <a class="arrow next" ng-click="showNext()"></a>

            <ul class="navigator">
                <li ng-repeat="image in gallery" ng-class="{'active':isActive($index)}">
                    <img src="{{image}}" ng-click="showPhoto($index);" class="img-responsive" />
                </li>
            </ul>

        </div>

我的图片库功能如下所示：

// initial image index
$scope._Index = 0;

// if a current image is the same as requested image
$scope.isActive = function (index) {
    return $scope._Index === index;
};

// show prev image
$scope.showPrev = function () {
    $scope._Index = ($scope._Index > 0) ? --$scope._Index : $scope.gallery.length - 1;
};

// show next image
$scope.showNext = function () {
    $scope._Index = ($scope._Index < $scope.gallery.length - 1) ? ++$scope._Index : 0;
};

// show a certain image
$scope.showPhoto = function (index) {
    $scope._Index = index;
};

当我点击图片时，我的'打开'功能将会运行：

$scope.open = function (index) {

  $scope.modalInstance = $modal.open({
    templateUrl: 'templates/hotelmodal.html',
    controller: 'HotelCtrl',
    size: 'lg',
    scope:$scope

  });

};

弹出一个模态：

<div class="modal-header">
    <h3 class="modal-title">Billedfremviser</h3>
 </div>
 <div class="modal-body">
<div ng-cloak class="slider">
            <img ng-init="$index = 1" ng-repeat="image in gallery" class="img-responsive" ng-swipe-right="showPrev()" ng-swipe-left="showNext()" ng-show="isActive($index)" ng-src="{{image}}"/>

            <a class="arrow prev" ng-click="showPrev()"></a>
            <a class="arrow next" ng-click="showNext()"></a>

            <ul class="navigator">
                <li ng-repeat="image in gallery" ng-class="{'active':isActive($index)}">
                    <img src="{{image}}" ng-click="showPhoto($index);" class="img-responsive" />
                </li>
            </ul>

        </div>       
 </div>
 <div class="modal-footer">
   <button class="btn btn-warning" ng-click="close()">Luk billedfremviser</button>
  </div>

正如您所看到的，我的主要画廊网站和模态的内容几乎相同。 模态的唯一目的是以更大的尺寸显示图像 - 这是完美的。 我唯一的问题是，我希望模态在打开时显示与主画廊网站相同的图像。

我尝试在模态ng-repeat上使用以下内容 - 仅用于测试目的：

ng-init="$index = 1"

但它只是弄乱了重复。 正如你所看到的，我在我的open函数中注入$ index - 但是再次..我不知道如何使用模态ng-repeat中的数字。

非常感谢您的帮助！

Answer 1

我唯一需要做的是：

// initial image index
if (!$scope._Index) {
  $scope._Index = 0;
}

此后，用于确定活动图片的$ scope._Index将在使用相同控制器打开模态时不会设置为0。然后，图像在模态中与主页面上的图像相同。

我不认为这是最好的方法，但它工作得很好。