Filter fields using input and drop down in angularJS

Question

I'm trying to filter through a json using ng-repeat. But as per requirement I need to use an input field and a drop down to filter through the data.

Below is my code:

Html:

<input ng-model="queryFilter" placeholder="Search"/><br>
<select ng-model="stateFilter">
   <option value="0" selected>Select State</option>
   <option value="City1 State1">City1 State1</option>
   <option value="City2 State2">City2 State2</option>
   <option value="City3 State3">City3 State3</option>           
   <option value="City4 State4">City4 State4</option>   
</select>

<div style="background:#eee;" ng-repeat="emp in empList | filter:query">
    <p style="margin-top:10px;">{{emp.organisation}}</p>
    <p>{{emp.number}}</p>
    <p>{{emp.location.city}} {{emp.location.state}}</p>
</div>

Javascript:

var testApp = angular.module("Testing",[]);
testApp.controller("empCtrl",function($scope){
$scope.queryFilter = '';
$scope.stateFilter = '';

$scope.query = function (emp) {
return emp.organisation.indexOf($scope.queryFilter)!=-1 || 
    emp.number.indexOf($scope.queryFilter)!=-1 || 
    emp.organisation.toLowerCase().indexOf($scope.queryFilter)!=-1 || 
    emp.number.toLowerCase().indexOf($scope.queryFilter)!=-1  || 
    (emp.location.city+" "+emp.location.state).indexOf($scope.stateFilter)!=-1 ;
}
$scope.empList = [
    {"organisation":"Organisation1","number":"7ZDG54","location":{"city":"City1","state":"State1"}},
    {"organisation":"Organisation2","number":"9D4F3G","location":{"city":"City2","state":"State2"}},
    {"organisation":"Organisation3","number":"1AS2S3","location":{"city":"City3", "state":"State3"}},
    {"organisation":"Organisation4","number":"4A5T7D","location":{"city":"City3","state":"State4"}},
];
$scope.orderProp="name";
});

JSFiddle:

I can filter using the input box but drop down doesn't work.

Note: The location is made up of two parameters (city and state) and a state may have multiple cities.

Any help is appreciated. Thanks.

Yes you are right, but if the string does not exist in the String, it returns -1. eg "hello''.indexOf("world"); will return -1. In my case stateFilter gets the value of the selected drop down value. — JSNinja
– JSNinja, Commented Aug 5, 2015 at 13:35
Yes, but if the input box is empty, queryFilter gets the value of '' so no results will be filtered out. — Brian Glaz
– Brian Glaz, Commented Aug 5, 2015 at 13:46
Yes that is true. And the input box works as expected. All the results should be there when the input box is empty. But the problem is with the stateFilter on the drop down. — JSNinja
– JSNinja, Commented Aug 5, 2015 at 14:00
If you remove all your filtering by queryFilter and just leave stateFilter, you will see that it works correctly. Your issue is when you are combining both filters. If queryFilter is '', nothing will ever be filtered out with your current logic because indexOf returns 0 — Brian Glaz
– Brian Glaz, Commented Aug 5, 2015 at 14:26

JSNinja · Accepted Answer · 2015-08-06 14:49:53Z

1

As Brian pointed out there were issues in the way I had implemented the logic. I have resolved the issue. Refer to the JS fiddle for solution.

JSFiddle

`$scope.query = function (emp) {

    if($scope.queryFilter == ''){
        return (emp.location.city+" "+emp.location.state).indexOf($scope.stateFilter)>-1 ;
    }
    else if($scope.stateFilter == ''){   
        return (emp.organisation+" "+emp.number).toLowerCase().indexOf($scope.queryFilter.toLowerCase())!=-1;
    }else{
        return ((emp.organisation+" "+emp.number).toLowerCase().indexOf($scope.queryFilter.toLowerCase())!=-1)
        && ((emp.location.city+" "+emp.location.state).indexOf($scope.stateFilter)>-1);
    }      
}`

Thanks for the help :)

answered Aug 6, 2015 at 14:49

JSNinja

7156 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Filter fields using input and drop down in angularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related