угловая/firebase удаляет элемент ng-repeat и повторно добавляет

Question

У меня есть объекты маркера mapbox, которые хранятся в массиве Firebase. Они загружаются как маркеры geojson на моей карте, и я также перечисляю эти объекты в контейнере с простым ng-repeat. Моя цель состоит в том, чтобы иметь функцию, в которой, если конкретный маркер находится вне поля зрения, удалить этот маркер из DOM. Если маркер возвращается в поле зрения, включите его обратно в повторный список.

Скажем, мой список отображается так:

<div id="list-item-container"> 
    <div class="list-item" title="{{marker.name}}" ng-repeat="marker in markers">{{marker.name}}</div> 
</div> 

В мой контроллер, я пытаюсь скрыть и показать эти элементы списка, основанные на них, находясь в карте границ, как так:

 var markers = L.mapbox.featureLayer() 
      .addTo(map); 

     markers.setGeoJSON($scope.driverMarkers); 

     var listingsFromMarker = function() { 
      var bounds = map.getBounds(); 

      markers.eachLayer(function(marker) { 

       var inBounds = [], id = marker.toGeoJSON().$id; 
       var idElement = $('.list-item[title="'+marker.toGeoJSON().$id+'"]'); 

       if (bounds.contains(marker.getLatLng())) { 
        HOW DO I GET THIS ITEM BACK IN MY LIST??? 
       } else { 
        idElement.remove(); 
       } 
      }); 
     }; 

     map.on('move', function() { 
      listingsFromMarker(); 
     }); 

Может ли кто-нибудь направить меня в правильном направлении, как поместить этот повторно повторяющийся элемент обратно в DOM?

спасибо.

Answer 1

1. Это не Угловой способ делать что-то. Удаление элемента DOM, который был создан с помощью ng-repeat, связывает развязку концепции ... зачем вы в этом случае используете Angular. Во всех случаях DOM следует манипулировать с помощью угловых директив, управляемых с помощью модели.

2. Таким образом, вы должны хранить два массива. Один - это настоящие данные - все маркеры. Другой содержит только маркеры, которые должны быть показаны в данный момент в списке.

Это будет выглядеть примерно так, как показано ниже

Ввиду

<div class="list-item" 
    ng-repeat="marker in markersInView" 
    title="{{marker.name}}">{{marker.name}}</div> 

В контроллере

var listingsFromMarker = function() { 
     var bounds = map.getBounds(); 
     var inBounds = []; 
     markers.eachLayer(function(marker) { 
      if (bounds.contains(marker.getLatLng())) { 
       inBounds.push(marker); 
      } 
     }); 
     $scope.markersInView = inBounds; 
     $scope.$apply();//as this happens on mapbox event it isn't in $digest cycle 
     //so need to tell Angular to update bindings 
    }; 

И потому что вы должны инициализировать $scope.markersInView где-то в самом начале. Этот код не представлен в OP, поэтому я его не изобретаю. Я думаю, вы поймете, как фильтровать маркеры на первом шоу