Использование поля ввода как для фильтра по умолчанию, так и для пользовательского фильтра с AngularJS

#javascript #angularjs #input #filter #pageload

#javascript #angularjs #ввод #Фильтр #загрузка страницы

Вопрос:

На это должен быть простой ответ, но я его не получаю. Я использую следующий элемент ввода для фильтрации результатов в таблице с помощью AngularJS. Если я вручную введу «foo» в поле ввода, таблица будет фильтроваться по «foo». Но мое жестко запрограммированное значение «foo» (в атрибуте значения ввода) не будет отображаться ни в браузере, ни фильтровать результаты при загрузке страницы. Как я могу заставить это поле ввода предоставлять как фильтр по умолчанию, так и пользовательский фильтр? Заранее спасибо.

 <input ng-model="search" id="search" type="text" placeholder="Search" value="foo">
<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>

Ответ №1:

Если вы используете ng-model, вам не следует устанавливать свое значение в html. Вместо этого вы должны задавать значение модели в Angular. Так что избавьтесь от своего значения =»foo» и сделайте это.

 function EventsController($scope, $http) {
        $http.get('/api/all-events').success(function(events) {
            $scope.events = events;
            $scope.search = "foo"; //This will set the models search to foo 
        });
    }

Ответ №2:

Отредактировано, начальный ответ является вариантом, но не рекомендуется.

Согласно документации для ng-init

Единственное подходящее использование ngInit — это сглаживание специальных свойств ngRepeat, как показано в демонстрации ниже. Кроме того, в этом случае для инициализации значений в области видимости следует использовать контроллеры, а не ngInit.

Ссылка является рабочим примером «правильного» способа сделать это.

http://plnkr.co/edit/EyV1R4WUyu2TEMTue3jT