Question

我试图根据另一个下拉列表中的选择来过滤一个下拉列表（DDL）。我正在引用这个问题来解决这个问题：Angularjs Filter data with dropdown

我的DDL看起来像这样：

    <select class="form-control input-sm"
            ng-change="echo(selectedDepartment);"
            ng-model="selectedDepartment"
            ng-options="d as d.DepartmentName for d in departmentList track by d.DepartmentId"></select>
    <select class="form-control input-sm"
            ng-change="echo(selectedTeam);"
            ng-model="selectedTeam"
            ng-options="t as t.TeamName for t in (teamList | filter: filterTeams) track by t.TeamId"></select>
    <select class="form-control input-sm"
            ng-change="echo(selectedRep);"
            ng-model="selectedRep"
            ng-options="r as (r.FirstName + ' ' + r.LastName) for r in (repList | filter: filterReps) track by r.UserId"></select>

echo中的ng-change函数正在使用console.log，因此我可以在进行选择时验证模型是否正在更新。

以下是我的过滤功能：

    $scope.filterTeams = function (team) {
        console.log("Team's DeptId: " + team.Department.DepartmentId + "  Selected Dept Id: " + $scope.selectedDepartment.DepartmentId);

        return (team.Department.DepartmentId === $scope.selectedDepartment.DepartmentId);
    };

    $scope.filterReps = function(rep) {
        return (rep.TeamId === $scope.selectedTeam.TeamId);
    };

奇怪的是，当我在我的过滤器功能中引用$scope.selectedDepartment时，即使在ng-change中运行的echo函数显示它之后，它也始终是一个空对象已更新。

过滤器函数是DDL引用的同一个控制器的一部分，并具有相同的$scope对象。

当我选择一个部门时，我的团队DDL变为空白，因为它将team.Department.DepartmentId与未定义进行比较。

$scope.selectedDepartment如何成为一个空对象并同时填充？

Answer 1

出于无法理解的原因，您无法在过滤功能中使用$scope。因此，为了完成这项工作，您必须在控制器中创建一个局部变量，并将值从$scope变量复制到本地变量以供过滤器函数使用。一切正常。

这是更新后的视图：

    <select class="form-control input-sm"
            ng-change="updateSelectedDepartment(selectedDepartment);"
            ng-model="selectedDepartment"
            ng-options="d as d.DepartmentName for d in departmentList track by d.DepartmentId"></select>
    <select class="form-control input-sm"
            ng-change="updateSelectedTeam(selectedTeam);"
            ng-model="selectedTeam"
            ng-options="t as t.TeamName for t in (teamList | filter: filterTeams) track by t.TeamId"></select>
    <select class="form-control input-sm"
            ng-model="selectedRep"
            ng-options="r as (r.FirstName + ' ' + r.LastName) for r in (repList | filter: filterReps) track by r.UserId"></select>

以下是控制器的相关部分：

var selectedDepartment = {};
var selectedTeam = {};

$scope.updateSelectedDepartment = function(dept) {
    selectedDepartment = dept;
};

$scope.updateSelectedTeam = function (team) {
    selectedTeam = team;
};

$scope.filterTeams = function (team) {
    return (team.Department.DepartmentId === selectedDepartment.DepartmentId);
};

$scope.filterReps = function (rep) {
    return (rep.Team.TeamId === selectedTeam.TeamId);
};

Answer 2

这是另一个选项......而不是让过滤器成为控制器上的一个功能，使其成为一个实际的过滤器（增加的好处是你可以在其他区域重复使用过滤器）。所以这样做：

.filter('teamsFilter', function() {
    return function(teamsList, selectedDepartment) {
        var out = [];
        angular.forEach(teamsList, function(team) {
            if (team.Department.DepartmentId === selectedDepartment.DepartmentId) {
                out.push(team);
            }
        });
        return out;
    }
})

然后像这样使用它：

<select ng-model="selectedTeam" 
        ng-options="t as t.TeamName for t in (teamList | teamsFilter: selectedDepartment)"></select>

下拉列表过滤器不起作用

2 个答案: