I can think of two ways.
The first and easiest is to add a search button. The user fills in the search field by clicking on the button that performs a search function, filters and fills $scope.notebooks
Then just remove | filter:query
It looks like this:
<div id="notebooks" ng-app="notebooks" ng- controller="NotebookListCtrl">
<input type="text" id="query" ng-model="query" />
<button ng-click="search()">Buscar</button>
<select ng-model="orderList">
<option value="name">By name</option>
<option value="-age">Newest</option>
<option value="age">Oldest</option>
</select>
<ul id="notebook_ul">
<li ng-repeat="notebook in notebooks | orderBy: orderList">
name: {{notebook.name}}<br />
procesor: {{notebook.procesor}}<br />
<div class="right top">{{notebook.age}}</div>
</li>
</ul>
<span>Number of notebooks: {{notebooks.length}}</span>
</div>
<script>
$scope.notebooks = []
$scope.search = function () {
/*
Voce pode buscar tudo no servidor e usar o filter com $scope.query para filtrar o resultado ou fazer a busca com o query
*/
$scope.notebooks = result // coloca o resultado no notebooks
}
</script>
The other way is to use ngKeyup and browse as the user types.
You create a function that does the search using $scope.query and adds ng-keyup="onSearch()" to the search input
It looks like this:
<div id="notebooks" ng-app="notebooks" ng- controller="NotebookListCtrl">
<input type="text" id="query" ng-model="query" ng-keyup="onSearch()" />
<select ng-model="orderList">
<option value="name">By name</option>
<option value="-age">Newest</option>
<option value="age">Oldest</option>
</select>
<ul id="notebook_ul">
<li ng-repeat="notebook in notebooks | orderBy: orderList">
name: {{notebook.name}}<br />
procesor: {{notebook.procesor}}<br />
<div class="right top">{{notebook.age}}</div>
</li>
</ul>
<span>Number of notebooks: {{notebooks.length}}</span>
</div>
<script>
$scope.notebooks = []
$scope.onSearch = function () {
// Procura as informaçoes baseadas em $scope.query
/* Voce pode buscar tudo no servidor e usar o filter com $scope.query para filtrar o resultado ou fazer a busca com o query
*/
$scope.notebooks = result // coloca o resultado no notebooks
}
</script>
