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;
};

当我点击图像时，我的 'open' 函数将运行:

$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"

但它只是把 ng-repeat 弄乱了。如您所见，我在打开的函数中注入了 $index - 但又一次..我不知道如何在模态 ng-repeat 中使用数字。

非常感谢您的帮助！

Answer 1

我唯一需要做的是：

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

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

我认为这不是最好的方法，但效果很好。

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

Bootstrap UI Modal - Injecting and initializing $index for ng-repeat

angularjs

angular-ui-bootstrap

bootstrap-modal