Question

我有一个ng-repeat，它在下拉列表中重复了一堆产品。

将鼠标悬停在这些家伙身上时，我想将我正在徘徊的图像反弹到下拉列表之外的容器中。

MARKUP：

<div class="quick-view-filters-container" ng-controller="setZoomDrop">
    <!-- zoomed image container from ng-repeat below -->
    <div class="product--shade__image-zoom--container">
        <img class="ng-hide" ng-show="zoom=1" image="option.product" step="1" always="1" />
    </div>
    <!-- dropdown -->
    <div class="product-select-shades-container" ng-repeat="attribute in attributes | onlyAttrsWithManyOptions | orderBy:$parent.$parent.$parent.configurableOrder">
        <h4>Products:</h4>
        <div class="product--options_list">
            <div ng-repeat="option in attribute.options" class="product--option_item" ng-if="option.product">
                <span class="product--shade__image ">
                      <!-- image -->
                      <img class="{{:: attribute.code == 'lamp_colour_config' ? 'zoomed' : ''}}" image="option.product" step="1" ng-mouseenter="setZoom(1)" ng-mouseleave="setZoom(0)" always="1" />
                    </span>
            </div>
        </div>
    </div>
</div>

控制器：

window.app.controller('setZoomDrop', ['$scope', function($scope) {

    var zoom = null;

    $scope.setZoom = function(number) {
        $scope.zoom = number;

    };
}]);

巷道：

您可以在标记中看到我将变量设置为1或0，这取决于下拉列表中的产品是否悬停在上面。我试图在缩放的图像容器中使用它。
option.product将无法正常工作，因为我不知道如何从ng-repeat中提取活动图像。

Answer 1

在setZoom函数中，而不是传递数字，如果是mouseenter，则传递选项对象;如果是mouseleave，则传递null：

$scope.curOpt = null;
$scope.setZoom = function(option) {
   $scope.curOpt = option;
}

然后在你的html：

<img ng-show="curOpt" image="curOpt.product" step="1" always="1" />

在ng-repeat

1 个答案: