Angular Changing filter based on select value and text input

Question

I am new to Angular so I think this is a basic concept that I'm just missing some step on. I want to have a search that does basic angular filtering, but I want to have a separate select that chooses what the text input searches on. Currently it looks like this:

Search inputs:

<input type="text" class="form-control" id="search-users" ng-model="userQuery">
      <span class="input-group-btn">
        <select ng-model="searchOn" ng-change="setSearchOn(searchOn)">
            <option value="CustomerId" selected>CustomerId</option>
            <option value="Username">Username</option>
        </select>
      </span>

Function:

$scope.setSearchOn = function(searchOnIn){
            console.log("setting searchOn to "+searchOnIn);
            $scope.searchOn = searchOnIn;
        }

Repeater:

<div ng-repeat="user in users | filter:userQuery.searchOn">

I feel like i shouldn't even need the function, shouldn't i be able to data-bind the value of the select to the filter on the repeater? I couldn't get that to work either. Help would be appreciated. Angular is awesome, but the beginning learning the way it works is a little rough :)

towr · Accepted Answer · 2014-01-12 11:04:29Z

1

As I understand it, we want to pick the property which we search on with the dropdown, and then search that property for value on the userQuery input.

One way to accomplish that is to (re)build an object to filter with when either userQuery or searchOn alters.

var app = angular.module('myapp', []).controller('ctrl', function($scope){
    /* some test data */
    $scope.users = [{CustomerId : 1, Username : 'Pete'},
                   {CustomerId : 2, Username : 'John'},
                   {CustomerId : 3, Username : 'Claus'}]

    $scope.setSearchFilter = function()
    {
        $scope.searchFilter = {};
        $scope.searchFilter[$scope.searchOn] = $scope.userQuery;
    }
})

In the html, I've set an ng-change on both the userQuery and searchOn to update the search filter.

<div ng-controller="ctrl">
    <input type="text" class="form-control" id="search-users" ng-model="userQuery" ng-change="setSearchFilter()" />
    <span class="input-group-btn">
        <select ng-model="searchOn" ng-change="setSearchFilter()">
            <option value="CustomerId" selected>CustomerId</option>
            <option value="Username">Username</option>
        </select>
      </span>

      <div ng-repeat="user in users | filter:searchFilter">
          {{user.CustomerId}} -- {{user.Username}}
      </div>
</div>

http://jsfiddle.net/nwdx7/1/

edited Jan 12, 2014 at 11:04

answered Jan 11, 2014 at 20:27

towr

4,1673 gold badges22 silver badges31 bronze badges

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

8 Comments

Z2VvZ3Vp Over a year ago

Thanks for responding! When I do this as you described I keep getting userQuery not defined because it is just a model in the html file. I tried adding a $scope.userQuery, but am running into similar issues. If I understand what you're doing the filter:searchFilter is becoming filter:userQuery[CustomerId] which is pretty much what I want, but I don't understand how the ng model would become a variable and then inject into the filter.

towr Over a year ago

Ah, I missed that userQuery is the model for an input. But then I have to ask, what do you expect userQuery[CustomerId] to be? Because $scope.userQuery is some text value, it won't have a CustomerId property. I'll try to throw a simpe jsfiddle together that does something I think makes sense.

Z2VvZ3Vp Over a year ago

I guess I am trying to get the model for userQuery to dynamically change based on the select. If I was going to search for CustomerId the userQuery ng-model would be userQuery.CustomerId right? so I want to bind searchOn to userQuery. I thought I could do userQuery.searchOn and it would bind them but I was wrong.

Z2VvZ3Vp Over a year ago

As I move forward this is going to be a common gap in my understanding. I just added limitTo:100 to the repeater to show the first 100 results only, but i should be able to click something to change that and inject how many results to show like limitTo:numRecords ?

Z2VvZ3Vp Over a year ago

Here is the jQuery equivalent that works, but I know I shouldn't be using jQuery here, there's gotta be an eloquent angular version:

$("#search-on").change(function(){ 			var searchOn = jQuery(this).val(); 			if(searchOn != ""){ 				$("#search-users").attr("ng-model","userQuery."+jQuery(this).val()); 			} else { 				$("#search-users").attr("ng-model","userQuery"); 			} 		});

|

Collectives™ on Stack Overflow

Angular Changing filter based on select value and text input

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related