2014-11-12 6 views
0

У меня есть таблица, сделанная угловым JS ng-repeat. Как я могу программно выделить (setSelected) одну из моих строк, когда я нажимаю маркер, который находится на карте? Вот мой стол:Выберите строку таблицы из карты. Интеграция с угловыми/Google Maps

  <table class="table"> 
       <thead> 
        <tr> 
         <th>Line ID</th> 
         <th>Type</th> 
         <th>Color</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr id="linesList" ng-repeat="line in lines | orderBy: 'line_id'" ng-click="setSelected($event, line.line_id)" ng-class="{selected : line.line_id === line_id}"> 
         <td>{{line.line_id}}</td> 
         <td>{{line.line_type}}</td> 
         <td>{{line.line_color}}</td> 
        </tr> 
       </tbody> 
      </table>  

Вот мой код: http://jsfiddle.net/52hfonsq/

+0

Я думаю, вы должны изменить класс, поместите его на 'td', а не 'tr', я думаю, что ваш код выглядит правильно для меня. Вы всегда можете создать plnker, а затем я могу посмотреть там –

+0

Я могу выбрать и выделить строку в этой таблице. Но я хочу выделить одну из строк, когда я нажимаю кнопку из этой таблицы. – Roo

+0

Сделайте эту кнопку измененной «оппортунистикой» на модели. Сделайте plnker, и я могу показать вам –

ответ

1

Пожалуйста, смотрите демо здесь http://jsfiddle.net/7w6gh4we/1/

google.maps.event.addListener(marker, 'click', function() { 
      console.log(marker); 


      $scope.safeApply(function() { 
      $scope.idSelected = marker.line_id; 
     }); 

      infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content); 
      infoWindow.open($scope.map, marker); 
     }); 


$scope.safeApply = function (fn) { 
     var phase = this.$root.$$phase; 
     if (phase == '$apply' || phase == '$digest') { 
      if (fn && (typeof (fn) === 'function')) { 
       fn(); 
      } 
     } else { 
      this.$apply(fn); 
     } 
    }; 
+0

@Roo Я обновил свой ответ – sylwester

Смежные вопросы