CODEWITHSUNDEEP
javascripthtmlangularjs
JSNinja
JSNinja

Reputation: 715

Filter fields using input and drop down in angularJS

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.

Upvotes: 2

Views: 457

Answers (1)

JSNinja
JSNinja

Reputation: 715

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 :)

Upvotes: 1

Related Questions