Использование поля ввода для фильтра по умолчанию и определенного пользователем с 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 для инициализации значений в области.
Ссылка является рабочим примером "правильного" способа сделать это.