Filter in search without displaying table when loading page

Question

Hi. I have a question about the filters. I would like a filter similar to the code below, but without displaying the table with all values when loading the page for the first time.

Only after the search were the values already filtered. How would it be?

   <div id="notebooks" ng-app="notebooks" ng- 
   controller="NotebookListCtrl">
   <input type="text" id="query" ng-model="query"/>
   <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 | filter:query | 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>

Full code here: https://codepen.io/bartaxyz/pen/nCfAj

Answer 1

I can think of two ways. The first and easiest is to add a search button. The user fills the search field click on the button that executes a function that does the search, filters and fills the $scope.notebooks

Then just remove | filter:query

Gets something 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 the ngKeyup and search as the user type. You create a function that does the search using the $scope.query and adds ng-keyup="onSearch()" in the search input

Gets something 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>