基于从下拉列表中选择的值的筛选列表不起作用

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

本文关键字：筛选 列表 不起作用 选择 下拉列表      更新时间：2023-09-26

最初加载页面时，

我有一个下拉列表，默认情况下有一个占位符"Select Person Type"（如代码中所示的空值文本）。。以及默认情况下显示所有人员的复选框列表。

根据从下拉列表中选择的值，我创建了一个角度过滤器，只显示该类型的人（这非常完美），但一旦我根据类型进行过滤，如果我选择占位符"选择人类型"，复选框列表将为空。

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

我认为发生这种情况的原因是Im基于PersonTypeID进行过滤，而占位符没有任何这样的ID。

当我再次选择占位符时，有什么方法可以显示整个人员列表吗？

说明：我想在使用人员类型过滤后选择占位符时显示所有人员。

谢谢你抽出时间。。。任何建议都可能有所帮助。

您可以通过在select上使用ng-options指令和带有谓词函数的过滤器来实现这一点。

function（value，index）：谓词函数可用于编写任意筛选器。函数是为数组的每个元素调用的。最终结果是谓词返回true的那些元素的数组。

在谓词函数中，我检查所选值是否不是null（请选择），否则我检查列表中的当前项是否与所选值匹配

你可以在这里查看一个工作示例

请参阅以下代码：

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);
 };
}])

从占位符中删除value="。

因为当您选择占位符时，它将使用空值进行筛选，而不是使用所有人员进行筛选。

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

使用这个。

相关文章：