下拉列表中的角度过滤器 - 为“全部”选择分配空值答案

【问题标题】：Angular filter in dropdown - assign empty value to "All" selection下拉列表中的角度过滤器 - 为“全部”选择分配空值
【发布时间】：2018-02-12 00:01:44
【问题描述】：

我正在使用带有过滤器的下拉列表过滤角度列表：

<div class="filter-project-type">
    <select name="project-filter" id="project-filter" ng-model="projectFilter" ng-options="project for project in projectName">
      <option value="">All</option>
    </select>
</div>
<div>
  <ul class="list" ng-show="showList">
    <task-list-element data='task' ng-repeat='task in tasksList | filter: projectFilter' ></task-list-element>
  </ul>
</div>

这是控制器代码

$scope.projectName = [];

$scope.showList = false;

$rootScope.tasksList = {};
retrieveTasksFactory.getTasksList()
.then(function (tasks) {
    var i;

    $rootScope.tasksList = tasks;
    if (tasks.length > 0) $scope.showList = true;

    // I am filling project's filter with values
    for (i = 0; i < $rootScope.tasksList.length; i++) {
        var temp = $rootScope.tasksList[i].project;
        if ($scope.projectName.indexOf(temp) == -1) {
            $scope.projectName.push(temp);
        }
     }
}, function (error) {
    console.error(error);
})

projectFilter 的值是从填充的 tasksList 中检索的，它们可以工作。但是，我想在名为All 的下拉过滤器中再添加一个值，它将重置过滤器，以便tasksList 中的所有元素都可见。我试图通过为All 添加默认选项值来解决此问题，但它不起作用，因为一旦您更改下拉列表的值，All 值就会消失。有没有人想出解决这个问题的方法。将'' 添加到 projectName 数组也不起作用，因为它在下拉菜单中提供了一个空白选项值。

问候

【问题讨论】：

请在您的问题中发布您的控制器代码

标签： angularjs angular-filters

【解决方案1】：

试试这个。将“全部”添加到您的 projectName 列表中。然后写一个过滤函数来过滤tasksList。像这样：
HTML：

<div class="filter-project-type">
    <select name="project-filter" id="project-filter" ng-model="projectFilter" ng-options="project for project in projectName">
    </select>
</div>
<div>
  <ul class="list" ng-show="showList">
    <task-list-element data='task' ng-repeat='task in tasksList | filter: filterTaskList' ></task-list-element>
  </ul>
</div>

JS：

$scope.projectName = ['All'];
$scope.showList = false;
$scope.projectFilter = "All";
$rootScope.tasksList = {};

retrieveTasksFactory.getTasksList()
.then(function (tasks) {
    var i;

    $rootScope.tasksList = tasks;
    if (tasks.length > 0) $scope.showList = true;

    // I am filling project's filter with values
    for (i = 0; i < $rootScope.tasksList.length; i++) {
        var temp = $rootScope.tasksList[i].project;
        if ($scope.projectName.indexOf(temp) == -1) {
            $scope.projectName.push(temp);
        }
     }
}, function (error) {
    console.error(error);
});

$scope.filterTaskList = function(value, index, array) {
    if($scope.projectFilter == "All") {
        return true;
    } else if(value.project.indexOf($scope.projectFilter) != -1){
        return true;
    } else {
        return false;
    }
}

我还没有执行此操作，但我认为它会起作用。希望这会有所帮助。

【讨论】：