javascript - 在ng-repeat之外访问和绑定(bind)数据

我有一个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中提取活动图像。

最佳答案

在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" />

关于javascript - 在ng-repeat之外访问和绑定(bind)数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34931712/