I've got a doozy of an ng-class problem.
So 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: <http://i.stack.imgur.com/RHZmo.png> 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 c. 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. Any ideas or hints on this would be very appreciated. -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
