Erweiterte Suche mit Filter - Angularjs

Question

Ich versuche, eine erweiterte Suche mit einem bestimmten Filter zu erstellen. Derzeit wird bei der Verwendung der Filteroption alles durchsucht, aber ich möchte es spezifischer haben.

Ich möchte eine Dropdown-Liste erstellen, die Ihnen die Möglichkeit, durch die Namen oder Orte statt suchen durch alle Ergebnisse zu suchen:

<form class="input-group col-md-4 form-inline"> 
    <input type="text" class="form-control" placeholder="Search captures" ng-model="search"/> 
    <div class="input-group-btn"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Options <span class="glyphicon glyphicon-cog"></span> </button> 
    <ul class="dropdown-menu"> 
     <li><input type="radio" name="searchoption" value="All" id="All" checked><label for="all">Search through all</label></li> 
     <li><input type="radio" name="searchoption" value="Birdname" id="Birdname"><label for="birdname">Search by birdname</label></li> 
     <li><input type="radio" name="searchoption" value="Place" id="Place"><label for="place">Search by place</label></li> 
    </ul> 
    </div> 
    <span class="input-group-btn"> 
    <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"> </span></button> 
    </span> 
</form> 

auf dem ausgewählten Radiobutton Je möchte ich die filter.search ändern:

<li ng-repeat="capture in captures|filter:search:strict|orderBy:'created_at':true|startFrom:currentPage:10" class="masonry-item clickable"> 

Also im Grunde möchte ich den Benutzer ein bestimmtes Optionsfeld, in die Lage sein zu wählen, und je nachdem, was er nahm, wird es ein bestimmtes Ergebnis suchen.

in der Winkel Dokumentation, dass auf meiner Suche Eingabe mein ng-Modell besagt, hat eine der folgenden sein:

<input type="text" class="form-control" placeholder="Search captures" ng-model="search.$> 
<input type="text" class="form-control" placeholder="Search captures" ng-model="search.birdname"> 
<input type="text" class="form-control" placeholder="Search captures" ng-model="search.place"> 

Obwohl eine bestimmte Art und Weise dort ich die ändern kann, auf dem Optionsfeld, je überprüft?

Hoffe, das ist klar.

Answer 1

Nur wenige Änderungen:

• ändern ng-model für Eingang zu search[searchBy]

  <input type="text" ng-model="search[searchBy]"> 
  

• gleichen Satz ng-model gleich zu searchBy für alle Radio Tasten und stellen Sie die value als zur Suche nach Zustand wie $ für alle, birdName, um in der birdName Eigenschaft des Objekts zu suchen, das in captures gespeichert ist, das Sie zu filtern versuchen.

  <li><input type="radio" name="searchoption" ng-model="searchBy" value="$" id="All" checked><label 
      for="all">Search through all</label></li> 
  <li><input type="radio" name="searchoption" ng-model="searchBy" value="birdName" id="Birdname"><label 
      for="birdname">Search by birdname</label></li> 
  <li><input type="radio" name="searchoption" ng-model="searchBy" value="place" id="Place"><label 
      for="place">Search by place</label></li> 
  

• letzte Änderung in ng-repeat zum Ausfiltern basierend auf searchBy Wert von über Radio-Buttons in search

  <li ng-repeat="capture in captures|filter:search">...</li> 
  

---

Stellen Anfangswert in der Steuereinrichtung für searchBy gleich $ zu Suche in allen Eigenschaften des Objekts beim Laden der ursprünglichen Seite, die durch Auswahl von "Andere" geändert werden kann Eigenschaften aus Drop-Down.

Weiteres Beispiel haben Sie einen Blick auf bestehende Post angularjs: change filter options dynamically

Fiddle example mentioned in above post