Aşağı açılır liste filtreleri çalışmıyor

Question

Bir diğerine yapılan bir seçime göre bir aşağı açılan listeyi (DDL) filtrelemeye çalışıyorum. Angularjs Filter data with dropdown

Benim DDLS şuna benzer: Ben bunu nasıl bu soruyu başvuran edildi ng-change yılında echo fonksiyon sadece console.log kullanıyor

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

yüzden modeli güncellenmekte olduğunu doğrulayabilir zaman seçim yapılır ve öyle. İşte

benim filtre fonksiyonları şunlardır:

$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); 
    }; 

Garip olan benim filtre işlevinde $scope.selectedDepartment başvuru ne zaman ng-change çalışan yankı işlevi içerisinde güncellenen gösterir sonra bile her zaman boş bir nesne olmasıdır.

Filtre işlevleri, DDL'lerin başvuruda bulunduğu ve aynı $scope nesnesine sahip olduğu aynı denetleyicinin bir parçasıdır.

Bir bölüm seçtiğimde, takımım DDL, team.Department.DepartmentId'u tanımsız olarak karşılaştırdığından boş kalır.

$scope.selectedDepartment Boş bir nesne nasıl olabilir ve aynı anda doldurulabilir?

Answer 1

Açıklanamaz nedenlerle, $scope bir filtre işlevi kullanamazsınız. Bu nedenle, bu çalışmayı yapmak için, kontrol cihazınızda yerel bir değişken oluşturmanız ve kullanılacak filtre işlevi için değeri $scope değişkeninden yerel olana kopyalamanız gerekir. Sonra her şey çalışıyor. İşte

güncellenmiş görünüm var:

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

Ve burada denetleyici alakalı bölümleri var: Burada

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

yerine filtreyi Kumandanızda bir işlev yapma ... başka bir seçenek var, yapmak gerçek bir filtre (buradaki ek fayda, filtreyi diğer alanlarda da kullanabilirsiniz).

.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; 
    } 
}) 

Ve sonra bu gibi kullanmak: Yani bunu

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