Использование поля ввода для фильтра по умолчанию и определенного пользователем с 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>

2 ответа

Решение

Если вы используете ng-модель, вам не следует устанавливать значение в html. Вместо этого вы должны установить значение модели в Angular. Так что избавьтесь от значения value="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 
        });
    }

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

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

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

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

http://plnkr.co/edit/EyV1R4WUyu2TEMTue3jT

Другие вопросы по тегам