The functionality of filtering a list based on the selected value from a drop-down menu is malfunctioning

Question

The functionality of filtering a list based on the selected value from a drop-down menu is malfunctioning

When the page initially loads, there is a dropdown with the default placeholder "Select Person Type" and a checkbox list displaying all persons by default.

An angular filter is used to display only the selected type of persons from the dropdown (working perfectly). However, when the placeholder "Select Person Type" is chosen after filtering, the checkbox list becomes 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>

The issue may be occurring because the filtering is based on PersonTypeID which the placeholder does not have. Is there a way to display the entire list of persons when the placeholder is selected again?

To clarify, I want to show all persons after selecting the placeholder following filtering by person type.

Thank you for your assistance and any suggestions are appreciated.

javascript jquery html css angularjs

Answer 1

Answer №1

To implement this feature, utilize the ng-options directive in the select element along with a custom filter function using a predicate.

function(value, index): A predicate function can be used to create specific filters. This function is executed for each item in an array, and only items that return true are included in the final result array.

In the provided predicate function, it checks if the selected value is not null (Please Select), otherwise it verifies if the current item matches the selected value from the list.

You can see a live demonstration here

Refer to the code snippets 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);
 };
}])

Answer 2

To implement this feature, utilize the ng-options directive in the select element along with a custom filter function using a predicate.

function(value, index): A predicate function can be used to create specific filters. This function is executed for each item in an array, and only items that return true are included in the final result array.

In the provided predicate function, it checks if the selected value is not null (Please Select), otherwise it verifies if the current item matches the selected value from the list.

You can see a live demonstration here

Refer to the code snippets 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);
 };
}])

Answer 3

Answer №2

Do not include any value within the placeholder text.

This is important because selecting a placeholder with an empty value may lead to filtering based on that empty value rather than including all persons in the filter.

Answer 4

Do not include any value within the placeholder text.

This is important because selecting a placeholder with an empty value may lead to filtering based on that empty value rather than including all persons in the filter.

Answer 5

Answer №3

data-ng-change="toggleSelection(id)"

Employ this method.

Answer 6

data-ng-change="toggleSelection(id)"

Employ this method.

The functionality of filtering a list based on the selected value from a drop-down menu is malfunctioning

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to address Peer dependency alerts within npm?

Why does the outcome of running this code vary each time?

jQuery - contrasting effects of the before() and after() functions

issue with cordova-plugin-geolocation functionality on Android mobile device

What is the best way to iterate through an array and make use of index values while removing any empty elements along the

React Div Element Not Extending to Web Page Margin

Generate a random number in PHP with the click of a button

What is the best way to consolidate all app dependencies into a single package?

Enhancing Numbers with JavaScript

Utilizing AngularJS: Techniques for Binding Data from Dynamic URLs

Setting up Node.js for production on Nginx: A comprehensive guide

When attempting to display an updated value in a dialog window using an ajax response for the second time, the change

Customize style with Dart programming language

The PHP script fails to execute within HTML elements

What is the best way to retrieve an array of objects from Firebase?

What steps do I need to follow to upload an image file through Socket.IO?

Unlock the ability to retrieve atom values beyond RecoilRoot

Incorrect x and y coordinates in the 'onclick' event

Using the "align" attribute is considered outdated and not recommended in HTML5 documents

Encountering a surprising token error while running a node.js application with a classic example