1

Say that I have a dropdown that is bound to a model property that will be checked to determine the model that will bound to my textbox.

<select ng-model="searchType">
   <option value="Id">Id</option>
   <option value="Firstname">Firstname</option>
</select>

whatever the user picked, The search will be based off that and it could either be searchQuery.id or searchQuery.Firstname

It is displayed like this:

<tr ng-repeat="user in users | orderBy:sortColumn:sortDescending | filter:searchQuery">
        <td>{{ user.Id }}</td>
        <td>{{ user.Firstname }}</td>
        <td>{{ user.LastName }}</td>
</tr>

I tried to use the code from a similar topic that uses the getter/setter but I can't seem to make it work.

How do I do this?

2 Answers 2

3

You can be search object inside controller like $scope.search = {} and then place search object over that filter.

<select ng-model="searchType">
   <option value="Id">Id</option>
   <option value="Firstname">Firstname</option>
</select>
<input class="form-control" ng-model="search[searchType]" ng-disabled="!searchType.length"/>

<tr ng-repeat="user in users | orderBy:sortColumn:sortDescending | filter: search">
    <td>{{ user.Id }}</td>
    <td>{{ user.Firstname }}</td>
    <td>{{ user.LastName }}</td>
</tr>

Though above will work but if you change dropdown it will now work as intended. So do clear search object when you change the dropdown value. So that search would be more accurate.

Demo Plunkr

4
  • 2
    Made a plunker based on this good answer for testing purposes: embed.plnkr.co/MDlUpFFRKxQRg7rCO61v Oct 12, 2016 at 21:32
  • 1
    Oh wow! I did not know about this! It does partial matching as well!
    – Zach
    Oct 12, 2016 at 21:37
  • @NathanBeck thanks for the plunkr, there was little bug in my code, when you change dropdown search object was preserving property value. So I clear than on dropdown change. Oct 12, 2016 at 21:39
  • 1
    @Zach & Nathan thanks for involvement in comment section, I really appreciate you guys, Cheers & Happy Coding :) Oct 12, 2016 at 21:42
2

if I'm not mistaken, you can do this :

ng-repeat="user in users | .... | filter:conditionalSearch()"

and then in your controller / link add this :

$scope.conditionalSearch = function() {
    if ($scope.searchType == 'id') return { .. condition 1 .. }
    if ($scope.searchType == 'firstName') return { .. condition 2 .. }
}
3
  • Close! the conditionalSearch function is a function that returns a function with the current user passed in! $scope.conditionalSearch = function() { return function (currentUser) { return currentUser[$scope.SearchType] == $scope.criteria; } }; but make sure the searchType matches the user property names - including case.
    – Zach
    Oct 12, 2016 at 21:21
  • @Zach please don't make drastic changes to the code of other answers. Instead, post your own answer if you think it might benefit others and the thread as a whole. Oct 13, 2016 at 3:39
  • @EmileBergeron Forgive me. I felt his answer was close enough to warrant the change and the credit rather than posting my own.
    – Zach
    Oct 13, 2016 at 19:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.