如何使 ng-model="search"对传单指令有影响吗? [英] how make ng-model="search" have influence on leaflet directive?

问题描述

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

我的目标:通过搜索输入来过滤影响表和地图中的 geojson 对象.

我的模块

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

我的工厂

 AppMapDirectory.factory("Directory", function($resource) {返回 $resource("json/result.json", {}, {得到: {方法:获取"，缓存:真}});});

我的控制器

 AppMapDirectory.controller("DirectoryMapList", function($scope, Directory) {Directory.get(函数(数据){$scope.hf_directory = data.features;功能 onEachFeature(特征，层){layer.bindPopup("<b>病房名称:</b>" + feature.properties.name +"<br><b>类别:" + feature.properties.category + "");}angular.extend($scope, {geojson:{数据:$scope.hf_directory，onEachFeature: onEachFeature}});});angular.extend($scope, {默认值:{tileLayer: "https://dnv9my2eseobd.cloudfront.net/v3/foursquare.map-ikj05elx/{z}/{x}/{y}.png",最大缩放:14，最小缩放:3},中央: {纬度:8.1238，液化天然气:11.8777，变焦:2}});});

我的模板

 
<ul><li><input ng-model="search.properties.name" placeholder="Name" ></li><li><input ng-model="search.properties.category" placeholder="Category"></li><表格><头><tr><th>姓名</th><th>类别</th></tr></thead><tr ng-repeat="hf_directory 中的 hf| filter:search"><td>{{ hf.properties.name }}</td><td>{{ hf.properties.category }}</td></tr></tbody><div 传单 id="map" center="center" defaults="defaults" geojson="geojson">

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

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

解决方案

这是一个如何在 geojson 数据集中反映搜索结果的示例，我已经对代码进行了注释以解释一些事情，因为它是一个相当大的部分并且理解工作我认为最好的例子.就这样吧:

控制器 HTML:

<leaflet geojson="geojson"></leaflet><输入ng-model="搜索"/><选择多个><option ng-repeat="geojson.data.features 中的功能">{{feature.properties.NAME}}</选项></选择>

控制器JS:

angular.module('app').controller('controller', ['$范围','$http','$过滤器',函数($scope，$http，$filter){//声明空搜索模型$scope.search = '';//声明空的geojson 对象$scope.geojson = {};//获取 GeoJSON 数据集$http.get('stations.geojson').success(function (data) {//将源数据分配给作用域$scope.data = 数据；//将相同的数据分配给 geojson 对象$scope.geojson.data = 数据；});//开始观察搜索模型$scope.$watch('search', function (newVal, oldVal) {//Watch 在范围初始化和空时被触发，所以区分:if (newVal !== oldVal && newVal !== '') {//有搜索值，应用源数据、属性名和搜索字符串来过滤//并将过滤器的返回值分配给 geojson$scope.geojson.data = $filter('filter')($scope.data, 'NAME', newVal);} 别的 {//搜索已初始化或清空，将sourcedata赋值给geojsonobject$scope.geojson.data = $scope.data;}});}]);

过滤JS:

angular.module('app').filter('filter', [function() {返回函数(geojson，searchProperty，searchValue){//声明空的 GeoJSON 对象来存储找到的匹配项var 匹配 = {'type': 'FeatureCollection', 'features': []};//循环源特征angular.forEach(geojson.features, function(featureObject, featureKey) {//确保指定的搜索属性存在如果(featureObject.properties.hasOwnProperty(searchProperty)){//源属性值为小写；var property = featureObject.properties[searchProperty].toLowerCase();//以小写形式搜索属性值；var search = searchValue.toLowerCase();//检查源值中是否存在搜索值如果 (property.indexOf(search) > -1) {//找到匹配，推送到新的 GeoJSON 对象match.features.push(featureObject);}}});//返回 GeoJSON 对象返回匹配项；};}]);

希望有所帮助，这里有一个关于 Plunker 的工作示例:http://plnkr.co/edit/z02JyuGE0Y8EDrhOqzoQ?p=预览

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

多个输入:

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

将范围内的搜索属性更改为对象:

$scope.search = {'姓名': ''，'线': ''};

修改手表功能:

$scope.$watch('search', function (newVal, oldVal) {//防止在初始化时触发如果 (!angular.equals(newVal, oldVal)) {//创建源数据的副本var geojson = angular.copy($scope.data);//遍历搜索对象angular.forEach(newVal, function (value, property) {//只有当值不为空时才执行如果(值！== ''){//应用过滤器并分配返回数据geojson = $filter('filter')(geojson, property, value);}});//将过滤后的 geojson 分配给范围内的 geojson$scope.geojson.data = geojson;//初始化时} 别的 {//在范围内将未过滤的源数据分配给 geojson$scope.geojson.data = $scope.data;}//启用深度观察，因为我们正在观察一个对象}， 真的);

这是 Plunker 的更新示例:http://plnkr.co/edit/OOx5DebtKXBfYqJ2Da3a?p=预览

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.

My aim: make filtering through searching input affect geojson objects in table and map.

My Module

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

My Factory

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

My Controller

   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
    }
});
});

My Template

 <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>

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?

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?

解决方案

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:

Controller HTML:

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

Controller 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;
            }
        });
    }
]);

Filter 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;
    };
}]);

Hope that helps, here's a working example on Plunker: http://plnkr.co/edit/z02JyuGE0Y8EDrhOqzoQ?p=preview

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:

Multiple inputs:

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

Change search property in scope to an object:

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

Modified watch function:

$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);

Here's the updated example on Plunker: http://plnkr.co/edit/OOx5DebtKXBfYqJ2Da3a?p=preview

这篇关于如何使 ng-model="search"对传单指令有影响吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！