Сделайте страницу AngularJS двойной страницей результатов поиска

У меня есть базовая таблица, в которой я отображаю данные, извлеченные из базы данных через AngularJS. У меня также есть поле поиска, которое использует AngularJS для фильтрации данных:

<input ng-model="search" id="search" type="text" placeholder="Search" value="">
<div ng-controller="eventsController")>
    <table>
        <tr ng-repeat="event in events | filter:search">
            <td><span ng-bind="event.title"></span></td>
            <td><span ng-bind="event.date_start"></span></td>
        </tr>
    </table>
</div>
<script>
    function EventsController($scope, $http) {
        $http.get('/api/all-events').success(function(events) {
            $scope.events = events;
        });
    }
</script>

Это отлично подходит для пользовательского поиска, но что, если я хочу запустить определенный фильтр при загрузке страницы, сохранив при этом функциональность поиска? Есть ли способ использовать AngularJS для автоматической фильтрации результатов на основе параметра URL (например, example.com?search=foo)? В идеале значение поля ввода также должно быть установлено равным параметру URL.


javascript search filter angularjs pageload
person americanknight    schedule 27.06.2014    source источник
comment
Этот вопрос не имеет ничего общего с фильтрацией. Все, о чем вы спрашиваете, - это как получить $routeParams (docs.angularjs.org/ api / ngRoute / service / $ routeParams) или строку запроса (stackoverflow.com/questions/16964444/). Как только вы проверите search, просто установите $scope.search в качестве этого значения, и все должно встать на свои места   -  person Ian    schedule 27.06.2014
comment
Я думаю, вам нужно добавить $location в свой контроллер. EventsController($scope, $http, $location) Сервис $ location анализирует URL-адрес в адресной строке браузера. Затем используйте $location.search().   -  person Alan Wells    schedule 27.06.2014

Ответы (1)


arrow_upward
1
arrow_downward

Как сказано в комментариях, это не имеет ничего общего с filter. Это больше о том, как вы организуете свой код для настройки пути URL-адреса, который вы отправляете на сервер. Вы можете попробовать сделать это так:

function EventsController($scope, $http) {
    // this field is bound to ng-model="search" in your HTML 
    $scope.search = 'ALL';

    $scope.fetchResults = function() {
        var path;
        if ($scope.search === 'ALL') {
            path = '/api/all-events';
        } else {
            path = '/search?input=' + $scope.search;
        }

        // here we send different URL path
        // depending on the condition of $scope.search
        $http.get(path).success(function(events) {
            $scope.events = events;
        });
    };

    // this line will be called once when controller is initialized
    $scope.fetchResults();
}

И ваш HTML-код, убедитесь, что ваш контроллер находится в родительском div поля ввода и кнопки поиска. А для кнопки поиска вы вызываете fetchResults() при нажатии:

<div ng-controller="eventsController")>
    <input ng-model="search" id="search" type="text" placeholder="Search" value="">
    <button ng-click="fetchResults()">Search</button>
    <div>
        <table>
            <tr ng-repeat="event in events | filter:search">
                <td><span ng-bind="event.title"></span></td>
                <td><span ng-bind="event.date_start"></span></td>
            </tr>
        </table>
    </div>
</div>
person b0nyb0y    schedule 30.06.2014