Cedric Bongaerts Cedric Bongaerts - 3 months ago 26
Javascript Question

Advanced Search with filter - Angularjs

I'm trying to create a advanced search with a specific filter.
Currently when using the filter option, everything gets searched, but I want to have it more specific.

I want to create a dropdown that gives you the option to search through the names or places instead of searching through all the results:

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


Depending on the selected radiobutton, I want the
filter.search
to change:

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


So basicly I want the user to be able to select a specific radio button, and depending on what he picks, it'll search a specific result.

In the Angular documentation it states that my ng-model on my search input has to be one of the following:

<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">


Though is there a specific way I can change those, depending on the radio button checked?

Hope this is clear.

Answer

Few changes:

  • Change ng-model for input to search[searchBy]

    <input type="text" ng-model="search[searchBy]">
    
  • Set same ng-model equals to searchBy for all radio buttons and set the value as per search by condition like $ for all, birdName to search in birdName property of the object that is stored in captures that you are trying to filter out.

    <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>
    
  • last change in ng-repeat to filter out based on searchBy value set by above radio buttons in search

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

Set initial value in controller for searchBy equal to $ to search in all properties of the object on initial page load that can be changed by selecting different properties from drop down.

For more example please have a look at existing post angularjs: change filter options dynamically

Fiddle example mentioned in above post

Comments