在 ng-repeat 之外访问和绑定数据

Question

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

将鼠标悬停在这些人身上时，我想将悬停在下拉菜单外的容器中弹回图像。

标记：

<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 之外访问和绑定数据

Access and bind data outside of ng-repeat

javascript

angularjs

ng-repeat