Advanced Search with filter - Angularjs

Question

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.

Community · Accepted Answer · 2017-05-23 12:01:02Z

2

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

edited May 23, 2017 at 12:01

CommunityBot

11 silver badge

answered Aug 14, 2016 at 11:46

Braj

46.9k5 gold badges63 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pex Over a year ago

Yep, that did the trick, though for some reason, the following:

<input type="radio" name="searchoption" value="$" id="Any" ng-model="searchBy" ng-click="changeFilterTo('$')" checked><label for="all">Search by Any</label>

isn't checked by default. Would you know why?

Braj Over a year ago

@CedricBongaerts I have already mentioned it my post. You have to set the default value of searchBy in controller $scope.searchBy='$' or use ng-init="searchBy='$'" in html itself.

Pex Over a year ago

My bad.. Thanks for all the help!

Collectives™ on Stack Overflow

Advanced Search with filter - Angularjs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related