如何使 ng-model="search" 对传单指令产生影响？

Question

我使用 leaflet-angular-directive，我成功地显示了 table 和地图中的对象，虽然我通过搜索输入实现过滤只影响 table 中的 geojson 对象。

我的目标：通过搜索输入过滤影响 table 和地图中的 geojson 对象。

我的模块

   var AppMapDirectory = angular.module('DirectoryAppMap', ['ngResource', 'leaflet- directive']);

我的工厂

 AppMapDirectory.factory("Directory", function($resource) {
 return $resource("json/result.json", {}, {
   get: {
       method: "GET",
       cache: true
    }
 });
 });

我的控制器

   AppMapDirectory.controller("DirectoryMapList", function($scope, Directory) {
   Directory.get(function(data) {

   $scope.hf_directory = data.features;

    function onEachFeature(feature, layer) {
            layer.bindPopup("<b>Wardname:</b> " + feature.properties.name +
                "<br><b>Category:" + feature.properties.category + "");
        }

     angular.extend($scope, {
       geojson: {
           data: $scope.hf_directory,
           onEachFeature: onEachFeature
       }
    });
    });

    angular.extend($scope, {
    defaults: {
        tileLayer: "https://dnv9my2eseobd.cloudfront.net/v3/foursquare.map-ikj05elx/{z}/{x}/{y}.png",
        maxZoom: 14,
        minZoom: 3
    },
    center: {
        lat: 8.1238,
        lng: 11.8777,
        zoom: 2
    }
});
});

我的模板

 <div ng-app="DirectoryAppMap" ng-controller="DirectoryMapList">

 <ul>
 <li><input ng-model="search.properties.name" placeholder="Name" ></li>
 <li><input ng-model="search.properties.category" placeholder="Category"></li>
 </ul>




<table>
<thead>
<tr>
<th>Name</th>
<th>Category</th>

</tr>
</thead>

<tbody>
<tr ng-repeat="hf in hf_directory| filter:search">
<td>{{ hf.properties.name }}</td>
<td>{{ hf.properties.category }}</td>

</tr>
</tbody>
</table>

<div leaflet id="map" center="center" defaults="defaults" geojson="geojson">

</div>
</div>

也许有人可以告诉我正确的方向所以我知道我做错了什么，我尝试以多种不同的方式将搜索绑定到传单但没有成功，实际上我认为这不应该在模板上完成边？而是在像过滤器这样的 geojson 选项中？现在这样做正确吗？

我使用了 ng-repeat 指令，但后来我有数千张地图，也许可以使用 ng-repeat 而仍然只有一张地图？

Answer 1

这是一个如何在 geojson 数据集中反映搜索结果的示例，我对整个代码进行了评论以解释一些事情，因为它相当大，我认为通过示例理解效果最好。所以在这里：

控制器HTML:

<leaflet geojson="geojson"></leaflet>
<input ng-model="search" />
<select multiple>
    <option ng-repeat="feature in geojson.data.features">
        {{feature.properties.NAME}}
    </option>
</select>

控制器 JS：

angular.module('app').controller('controller', [
    '$scope',
    '$http',
    '$filter',
    function ($scope, $http, $filter) {
        // Declare empty search model
        $scope.search = '';
        // Declare empty geojson object
        $scope.geojson = {};
        // Fetch GeoJSON dataset
        $http.get('stations.geojson').success(function (data) {
            // Assign source data to scope
            $scope.data = data;
            // Assign same data to the geojson object
            $scope.geojson.data = data;
        });
        // Start watching the search model
        $scope.$watch('search', function (newVal, oldVal) {
            // Watch gets fired on scope initialization and when empty so differentiate:
            if (newVal !== oldVal && newVal !== '') {
                // Has searchvalue, apply sourcedata, propertyname and searchstring to filter
                // and assign return value of filter to geojson 
                $scope.geojson.data = $filter('filter')($scope.data, 'NAME', newVal);
            } else {
                // Search has been initialized or emptied, assign sourcedata to geojsonobject
                $scope.geojson.data = $scope.data;
            }
        });
    }
]);

过滤JS：

angular.module('app').filter('filter', [function() {
    return function(geojson, searchProperty, searchValue) {
        // Declare empty GeoJSON object to store found matches
        var matches = {'type': 'FeatureCollection', 'features': []};
        // Loop over source features
        angular.forEach(geojson.features, function(featureObject, featureKey) {
            // Make sure that the assigned searchproperty exists
            if (featureObject.properties.hasOwnProperty(searchProperty)) {
                // Source propertyvalue as lowercase;
                var property = featureObject.properties[searchProperty].toLowerCase();
                // Search propertyvalue as lowercase;
                var search = searchValue.toLowerCase();
                // Check if searchvalue exists in sourcevalue
                if (property.indexOf(search) > -1) {
                    // Found match, push to new GeoJSON object
                    matches.features.push(featureObject);
                }
            }
        });
        // return GeoJSON object
        return matches;
    };
}]);

希望对您有所帮助，这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/z02JyuGE0Y8EDrhOqzoQ?p=preview

在关于过滤多个属性的评论中进行讨论后，我认为在示例中添加它可能很方便，因此假设 geojson 有一个 NAME 和一个 LINE 属性:

多个输入：

  <input ng-model="search.NAME" />
  <input ng-model="search.LINE" />

将范围内的搜索属性更改为一个对象：

$scope.search = {
  'NAME': '',
  'LINE': ''
};

修改手表功能：

$scope.$watch('search', function (newVal, oldVal) {
    // Protect against firing on initialization
    if (!angular.equals(newVal, oldVal)) {
        // Create copy of the sourcedata
        var geojson = angular.copy($scope.data);
        // Loop over search object
        angular.forEach(newVal, function (value, property) {
            // Only execute if value isn't empty
            if (value !== '') {
                // Apply filter and assign return data
                geojson = $filter('filter')(geojson, property, value);
            }
        });
        // Assign filtered geojson to geojson in scope
        $scope.geojson.data = geojson;
    // On initialization
    } else {
        // Assign unfiltered source data to geojson in scope
        $scope.geojson.data = $scope.data;
    }
// Enable deep watch because we're watching an object
}, true);

这是 Plunker 上的更新示例：http://plnkr.co/edit/OOx5DebtKXBfYqJ2Da3a?p=preview

如何使 ng-model="search" 对传单指令产生影响？

how make ng-model="search" have influence on leaflet directive?

angularjs

angularjs-ng-repeat

geojson

angular-filters

angular-leaflet-directive