Reputation: 81

Filtering list based on value selected from drop down is not working

Initially when the page loads,

I have a drop down which by default has a place holder "Select Person Type" (empty value text as shown in the code)..and a check box list which by default displays all the persons.

Based on the value selected from dropdown, I created a angular filter to display only that type of persons (Which is working perfect), but once i filter based on type and if i select placeholder "Select Person Type" the checkbox list is empty.

<select class="form-control" id="personId" data-ng-model="personModel.personTypeID" name="selectPersonType"
           ng-options="person.personTypeUniqueID as person.personTypeEn for person in personTypes | orderBy:'personTypeEn' ">
            <option value="">Select person type</option><br/></select><div ng-repeat="person in persons|orderBy:'name'|filter: { personTypeID: personModel.PersonTypeID }|filter:searchperson" style="display:flex;padding-left:5px">
            <input style="min-width:13px !important;" class="checkbox" id={{person.personUniqueId}} type="checkbox" ng-checked="selectedOptionPerson.indexOf(person.personUniqueId)> -1" ng-click="toggleSelection($event)" ng-model="option.optionPersonModel[$index]">{{person.name}}
        </div>

Reason I think its happening because is Im filtering based on PersonTypeID and the placeholder doesn't have any such ID.

Is there any way that i can display the whole list of persons when I select placeholder again?

Explanation: I wanna display all the persons when I select the place holder after I filtered using person type.

Thank you for your time...any suggestions might help.

Upvotes: 1

Answers (3)

Tjaart van der Walt

Reputation: 5179

You can achieve this by using the ng-options directive on the select and a filter with a predicate function.

function(value, index): A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for.

In my predicate function I check if the selected value is not null (Please Select), else I check if the current item in the list matches the selected value

You can view a working example here

Please see code below:

HTML

<div ng-controller="PeopleController">
    <select data-ng-options="employmentType.id as employmentType.descr for employmentType in employmentTypes" data-ng-model="selectedEmploymentTypeId">
        <option value="">Please Select</option>
    </select>
    <ul>
        <li data-ng-repeat="person in people | filter:getFilter">
            {{person.name}}
        </li>
    </ul>
</div>

Javascript:

controller('PeopleController', ['$scope', function($scope) {
  $scope.people = [{
      name: 'John Doe',
      employmentTypeId: 1
    }, {
      name: 'Jane Doe',
      employmentTypeId: 2
    }, {
      name: 'Santa Claus',
      employmentTypeId: 3
   }];

 $scope.employmentTypes = [{
     id: 1,
     descr: 'Permanent'
   }, {
     id: 2,
     descr: 'Temporary'
   }, {
     id: 3,
     descr: 'Casual'
   }];

 $scope.getFilter = function(value, index) {    
    if ($scope.selectedEmploymentTypeId === null || $scope.selectedEmploymentTypeId === undefined) {
        return true;
    }
    return (value.employmentTypeId === $scope.selectedEmploymentTypeId);
 };
}])

Upvotes: 1