如何化妆NG-模式= [搜寻＆QUOT;对单张指令的影响？ [英] how make ng-model="search" have influence on leaflet directive?
问题描述
我用传单-角指令，我成功地显示在表格和地图对象，虽然我取得了通过搜索输入仅影响表以GeoJSON对象的过滤。
I use leaflet-angular-directive, i successfully display objects in table and map, although i achieved filtering through searching input only affect geojson objects in table.
我的目标：使通过搜索输入影响表和地图以GeoJSON对象的过滤
My aim: make filtering through searching input affect geojson objects in table and map.
我的模块
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的选择吗？这是我们做正确的事？
Maybe somebody could show me right direction so I know what I am doing wrong, I tried to bind search to leaflet on many different ways but without success, actually i think that it is not something that should be done on template side? But rather in options for geojson like filter? Is this the right thing to do now?
我用NG重复指令，但后来我有成千上万的地图，也许它可以使用NG重复，仍然只有一个地图吗？
I used ng-repeat directive but then i had thousands of maps, maybe it is possible to use ng-repeat and still have only one map?
推荐答案
下面是一个如何体现以GeoJSON数据集的SearchResult一个例子，我评论过的code througout解释一些东西，因为它是一个相当大的一块和了解的例子，我认为效果最好。所以这里有云：
Here's an example of how to reflect searchresults in the geojson dataset, i've commented the code througout to explain some things since it's a rather large piece and understanding works best by example i think. So here it goes:
控制器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 /编辑/ z02JyuGE0Y8EDrhOqzoQ？p = preVIEW
在约过滤的多个属性我想这可能是很方便的添加，在一个例子，假设这样的GeoJSON的意见讨论有一个名字和一个行属性：
After discussion in the comments about filtering on multiple properties i thought it might be handy to add that in an example, so assuming the geojson has a NAME and a LINE property:
多个输入：
<input ng-model="search.NAME" />
<input ng-model="search.LINE" />
在范围更改搜索属性的对象：
Change search property in scope to an object:
$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
Here's the updated example on Plunker: http://plnkr.co/edit/OOx5DebtKXBfYqJ2Da3a?p=preview
这篇关于如何化妆NG-模式= [搜寻＆QUOT;对单张指令的影响？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
