Question

我有一个存储在Firebase数组中的mapbox标记对象。它们在我的地图上作为geojson标记加载，我也将这些对象列在具有简单ng-repeat的容器中。我的目标是有一个函数，如果特定标记不在视图中，则从DOM中删除该标记。如果标记返回到视图中，则将其包含在ng-repeated列表中。

假设我的列表显示如下：

<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

这不是Angular的做事方式。删除由UnsafeMutablePointer绑定创建的DOM元素会破坏概念...在这种情况下，为什么要使用Angular ..在所有情况下，DOM都应该在Angular指令的帮助下进行操作，Angular指令通过模型控制
因此你应该存储两个数组。一个是真实数据 - 所有标记。另一个只包含希望在列表中显示的标记。

它看起来像下面的

在视图中

ng-repeat

在控制器中

<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 };。此代码未在OP中显示，因此我不发明它。我想你会弄清楚如何在第一场秀中过滤标记

angular / firebase删除ng-repeat项目并重新添加

1 个答案: