1

I have an app with a map/markers on the right and a list-item menu on the left with info about the markers (like Yelp or Foursquare).

With some of my beginner hacking, I got the hover events to sort of work:

Map examp

But it's odd, the list-item (pink background on hover) only works when I mouseout of the marker. I'm trying to set it up so that when you mouse over the marker, the appropriate list-item's background changes and when you mouseout, it goes back to white. Most of the other ng-class examples/questions I read through seem to work quite differently (they're going for a different functionality).

Ok, to the code:

HTML

<div class="col-md-6" id="leftCol">
<div class="list-group" ng-controller="ShowsCtrl">
    <div class="nav nav-stacked list-group-item" id="sidebar" ng-repeat="(key, show) in shows.features" ng-mouseover="menuMouse(show)" ng-mouseout="menuMouseout(show)" ng-class="{hover: $index == hoveritem}">   

The key part there is the ng-class="{hover: $index == hoveritem}"

Now I'll show you where hoveritem comes from

Controller

$scope.hoveritem = {};

    function pointMouseover(leafletEvent) {
        var layer = leafletEvent.target;
        //console.log(layer.feature.properties.id);
        layer.setIcon(mouseoverMarker);
        $scope.hoveritem = layer.feature.properties.id;
        console.log($scope.hoveritem);
    }

    function pointMouseout(leafletEvent) {
        var layer = leafletEvent.target;
        layer.setIcon(defaultMarker);
    }

    $scope.menuMouse = function(show){
        var layer = layers[show.properties.id];
        //console.log(layer);
        layer.setIcon(mouseoverMarker);
    }

    $scope.menuMouseout = function(show){
        var layer = layers[show.properties.id];
        layer.setIcon(defaultMarker);
    }




    // Get the countries geojson data from a JSON
    $http.get('/json/shows.geojson').success(function (data, status) {

        angular.extend($scope, {
            geojson: {
                data: data,
                onEachFeature: function (feature, layer) {
                    layer.bindPopup(feature.properties.artist);
                    layer.setIcon(defaultMarker);
                    layer.on({
                        mouseover: pointMouseover,
                        mouseout: pointMouseout
                    });
                    layers[feature.properties.id] = layer;
                    //console.log(layers);
                }
            }

        });
    });

}]);

So mousing over a marker (layer.on({ mouseover: pointMouseover, mouseout: pointMouseout });)

fires the appropriate functions which then changes the icon colors.

I connected the layer.feature.properties.id; to $scope.hoveritem so that my HTML can then use that as the index (for ng-class). When you mouseover a marker, it then feeds the marker id through to $scope.hoveritem which then it turn goes into the $index part of the HTML, thus changing it's CSS class.

But something is awry. It only changes to the correct list item on mouseout instead of mouseover. Furthermore, I can't figure out to get it to return to the default white state. None of the list items should look active if the mouse is not on a marker.

1

The reason for the delay was because of the angular $apply digest cycle. Angular basically wasn't aware of the changes to hoveritem. Wrapping it with $scope.$apply did the trick:

$scope.$apply(function () {
            $scope.hoveritem = layer.feature.properties.id;
        })

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.