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

Question

最初在页面加载时，

我有一个下拉菜单，默认情况下有一个占位符“选择人员类型”（代码中显示的空值文本）..和一个默认显示所有人员的复选框列表。

基于从下拉列表中选择的值，我创建了一个角度过滤器以仅显示该类型的人员（效果很好），但是一旦我根据类型进行过滤并且如果我选择占位符“选择人员类型”复选框列表是空的。

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

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

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

感谢您的宝贵时间...任何建议都可能会有所帮助。

Answer 1

您可以通过在 select 上使用 ng-options 指令和带有predicate 函数的过滤器来实现此目的。

function(value, index)：谓词函数可用于编写任意过滤器。为数组的每个元素调用该函数。最终结果是谓词返回 true 的那些元素的数组。

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

您可以查看工作示例here

请看下面的代码：

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

从占位符中删除 value=""。

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

Answer 3

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

使用这个。