Conditional model binding in angularJS based from the drop down selection

Question

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?

Pankaj Parkar · Accepted Answer · 2016-10-12 21:38:48Z

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

edited Oct 12, 2016 at 21:38

answered Oct 12, 2016 at 21:15

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

4 Comments

Nathan Beck Over a year ago

Made a plunker based on this good answer for testing purposes: embed.plnkr.co/MDlUpFFRKxQRg7rCO61v

Zach Over a year ago

Oh wow! I did not know about this! It does partial matching as well!

Pankaj Parkar Over a year ago

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

Pankaj Parkar Over a year ago

@Zach & Nathan thanks for involvement in comment section, I really appreciate you guys, Cheers & Happy Coding :)

Nir · Accepted Answer · 2016-10-12 21:16:48Z

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

answered Oct 12, 2016 at 21:16

Nir

1,34312 silver badges8 bronze badges

3 Comments

Zach Over a year ago

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.

Emile Bergeron Over a year ago

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

Zach Over a year ago

@EmileBergeron Forgive me. I felt his answer was close enough to warrant the change and the credit rather than posting my own.

Collectives™ on Stack Overflow

Conditional model binding in angularJS based from the drop down selection

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related