как заставить ng-model=search влиять на директиву листовок?

Вот пример того, как отражать результаты поиска в наборе данных 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< /а>