CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Harry Lincoln
Harry Lincoln

Reputation: 656

Access and bind data outside of ng-repeat

I have an ng-repeat which repeats a bunch of products in a dropdown.

On hover over these guys, I want to bounce the image that I'm hovering into a container outside of the dropdown.

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>

Controller:

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

    var zoom = null;

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

    };
}]);

Workings:

Upvotes: 0

Views: 324

Answers (1)

tanenbring
tanenbring

Reputation: 780

in your setZoom function, instead of passing a number pass the option object if mouseenter or null if mouseleave:

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

Then in your html:

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

Upvotes: 1

Related Questions