current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 3 down vote favorite

I'm having trouble getting a particular Angularjs filtering setup working that involves a text input, ng-repeat and a select, and love any assistance anyone can provide.

I have an array of objects like so: 

[{ id: '1', firstName: 'Charles', lastName: 'Charlston' }, ...]

I'm filtering the array by text input like so:

<input ng-model="searchText" />

<div ng-repeat="person in people | filter : searchText" ...

Currently, this sorts the array of people objects for "any" property value and it works fine.

What i'm trying to achieve is be able to change the property that my <input ng-model="searchText" /> filters the people array by, based on what <option id="1" label="lastName" selected>Last Name</option> is selected.

My select looks like this:

<select class="filterSelect"
        ng-model="selectedPropertyOption"
        ng-options="prop.name for prop in peopleProperties"></select>

peopleProperties looks like this:

$scope.peopleProperties = [{id: "1", name: "firstName"}, ...];

So instead of typing: "charles" in the input and getting results that match either property id, fistName or lastName, I need to be able to choose an option from a select where the option is a property name like "firstName", that I want to filter by. Then, whatever is typed in the input would only filter objects based on which option was selected.

I hope this makes sense enough! Any guidance would be much appreciated, thank you in advance!

share|improve this question
    
can u please provide a jsfiddle ? – Flash Jul 30 '15 at 4:35
up vote 2 down vote accepted

This is one of those times where it's inconvenient and kinda "dirty" (although possible) to specify the filter purely in the View.

What we need is a filter object that can take the following forms:

$scope.filter = { firstName: "foo" };

// or
$scope.filter = { lastName: "foo" };

// or - to reset the "filterBy" property
$scope.filter = { $: "foo" }; // or just "foo"

This isn't easy to do in the expression, so it's better to do in the controller:

$scope.filter = {$: undefined}; // initial non-filtering value

$scope.setFilter = function(){
  $scope.filter = {};
  $scope.filter[$scope.selectedPropertyOption || '$'] = $scope.searchText;
};

Then, invoke the setFilter function on every change of searchText of selectedPropertyOption:

<input ng-model="searchText" ng-change="setFilter()" />

<select ng-model="selectedPropertyOption"
        ng-options="prop.name as prop.name for prop in peopleProperties"
        ng-change="setFilter()">
  <option value="">All Fields</option>
</select>

<div ng-repeat="person in people | filter: filter">
  {{person}}
</div>

Demo

share|improve this answer
    
Brilliant! I can't give enough +1s, that works exactly like I was hoping for, thank you very much for your help! – Benny P Jul 31 '15 at 0:19
    
it is amazing! it is possible to have an explanation for this line: $scope.filter[$scope.selectedPropertyOption || '$'] = $scope.searchText; Thanks – Dan Romulus Aug 15 at 17:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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