ドロップダウンリストフィルタが機能しません

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> 

ng-changeでecho関数はちょうどその時私は、モデルが更新されていることを確認することができます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で実行されているエコー機能は、それが更新されています示した後でも、常に空のオブジェクトであるということです。

フィルタ関数は、DDLが参照する同じコントローラの一部であり、同じ$scopeオブジェクトを持ちます。

チームを選択すると、team.Department.DepartmentIdと定義されていないDDLが空白になります。

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