我使用leaflet-angular-directive,我成功地在表格和地图中显示对象,虽然我通过搜索输入实现过滤只影响表格中的geojson对象。
我的目标:通过搜索输入过滤影响表和地图中的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 并且仍然只有一张地图?