Question

最初加载页面时，

我有一个下拉列表，默认情况下有一个占位符＆＃34;选择人员类型＆＃34; （代码中显示的空值文本）..以及一个默认显示所有人的复选框列表。

根据从下拉列表中选择的值，我创建了一个角度过滤器，仅显示该类型的人（这是完美的工作），但是一旦我根据类型进行过滤，如果我选择占位符＆＃34;选择人物类型＆＃ 34;复选框列表为空。

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

我认为它发生的原因是因为我基于PersonTypeID过滤而占位符没有任何这样的ID。

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

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

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

Answer 1

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

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

删除值=＆＃34;＆＃34;来自占位符。

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

Answer 3

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

使用它。

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

3 个答案: