過濾列表中向下不工作

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和具有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

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

使用此。

Answer 3

從佔位符中刪除value =「」。

因爲當您選擇佔位符時，它將使用空值過濾而不是與所有人過濾。