Finder with ng-repeat in AngularJS

Question

Finder with ng-repeat in AngularJS

Navigation

#1 by (1 votes)

2

I have a very simple search engine in my web application with AngularJS, that simple:

<input type="search" id="search" maxlength=26 placeholder="Filtrar noticias..." ng-model="search.title">

<li ng-repeat="item in itemData | orderBy:'-order' | filter:search as results"></li>

<span ng-if="results.length==0">No hay resultados...</span>

When writing in the input, the items are automatically filtered by titles, how can I filter them by pressing enter on the pc or on mobile devices, for example, by pressing the search button on the keyboard and remaining filtering elements even if I erase what I wrote? I would greatly appreciate the help, for the moment I do not know much about JavaScript and AngularJS.

I am currently using AngularJS 1.5.7

javascript angularjs

asked by adrianojosue 19.06.2016 в 19:28

source

1 answer

Pass an object between controllers org.apache.jasper.JasperException: PWC6345: There is an error in invoking javac. A full JDK (not just JRE) is required

score 1 · Answer 1

You can use the options of ng-model

<input type="search" id="search" maxlength=26 
           placeholder="Filtrar noticias..." ng-model="search.title" 
           ng-model-options="{updateOn : 'change blur'}">

In this case, changing which events (of the input element) trigger the search.

If you want to be updated only when you press the enter key, I think the following should do the trick.

<input type="search" id="search" maxlength=26 
           placeholder="Filtrar noticias..." ng-model="searchAux" 
           ng-keyup="$event.keyCode === 13 && search.title = searchAux">

If you prefer to take it out of the markup and move it into context ...

$scope.doKeyUp= function (e) {
  if (e.keyCode === 13) {
    $scope.search.title = $scope.searchAux
  }
}

Being the markup:

<input type="search" id="search" maxlength=26 
           placeholder="Filtrar noticias..." ng-model="searchAux" 
           ng-keyup="doKeyUp($event)">