0

I have one set of JSON data populating two view items in angularjs. I need to trigger an icon change in one view with the mouse entering the list item in the other view. How do I accomplish this?

HTML:

<div ng-app="homeApp">
    <div class="row" ng-controller="HomeMapController" ng-init="init()">
        <div ui-view="mapView" class="col-lg-8"></div>
        <div ui-view="mapListView" class="col-lg-4"></div>
    </div>
</div>

Map View:

<map style="height:400px;" center="-34.397, 150.644" zoom="8" zoom-to-include-markers="auto">
    <marker icon="{{transmitterIcon}}" ng-repeat="transmitter in transmitters" position="{{transmitter.location.lat}},{{transmitter.location.lng}}" />
</map>

List View:

<div style="background-color: #f0f7fd; height: 400px; overflow-y: hidden;">
    <div class="list-group">
        <a href="#" class="list-group-item" ng-mouseover="highlightMarker(transmitter)" ng-repeat="transmitter in transmitters">
            <h4 class="list-group-item-heading">{{transmitter.frequency}} {{transmitter.mode}} @ {{transmitter.time_on_str}} UTC</h4>
        <p class="list-group-item-text">
            {{transmitter.description}}
            <br>
            {{transmitter.location.site}}
        </p>
    </a>
</div>

JS:

var homeApp = angular.module('homeApp', [
'ui.router',
'ngMap'
]);

homeApp.controller('HomeMapController', ['$scope', '$http', function($scope, $http) {
$scope.test = 'Test';
$scope.transmitterIcon = {
    url: globals.assetsurl + 'images/maps/google-icons/radio-station-2.png',
    size: [32,37],
    origin: [0,0],
    anchor: [16,37]
};

$scope.getLocations = function() {
    $http.get(globals.ajaxurl + 'index.php').success(function(data, success) {
        $scope.transmitters = data;
    }).error(function(error) {});
};

$scope.highlightMarker = function(obj) {
    // need this to manipulate marker in map when mouse event occurs in list
    console.log(obj);
};

$scope.init = function() {
    $scope.getLocations();
};
}]);

homeApp.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('index', {
        url: '',
        views: {
            mapView: {templateUrl: '/assets/js/index/partials/map.html'},
            mapListView: {templateUrl: '/assets/js/index/partials/mapList.html' }
            },
        controller: 'HomeMapController'
    });
}
);
cj5
  • 785
  • 3
  • 12
  • 34

1 Answers1

1

You could try using $broadcast and $on to pass and receive a state variable.

$on and $broadcast in angular

Community
  • 1
  • 1
Sushant Rao
  • 474
  • 1
  • 4
  • 12