0
我有一個世界各地約1400個位置的列表並使用ng-repeat顯示它們。我希望通過下拉菜單使用過濾器功能縮小列表範圍，因此我只能看到Region：Americas，Country：Canda中的位置。我已經使下拉篩選器正常工作，但我的問題是更改下拉列表的值。如果我在第一個下拉列表中選擇區域選項，則國家/地區下拉菜單應該只有該地區的國家/地區。AngularJS根據DropDown值更改DropDown值用於ng-repeat過濾器
這裏是我的模板：
Region:<select ng-model='RegionLocation.Region' ng-options="location.Region for location in RegionOptions.Regions"></select>
Country:<select ng-model='CountryLocation.Country' ng-options="location.Country for location in CountryOptions.Countries"></select>
<div>
<md-card data-ng-repeat="location in LocationCtrl.Locationlist | filter:RegionFilter | filter:CountryFilter ">
<md-card-content>
<h2>{{::location.LID}}</h2>
</md-card-content>
</md-card>
</div>
這裏是我的Controller.js
function LocationController(LocationList, $scope) {
var LocationCtrl = this;
LocationCtrl.Locationlist = LocationList;
LocationCtrl.Regions = filterRegions(LocationList);
LocationCtrl.Regions.unshift({
Region: 'Show All'
})
$scope.RegionOptions = {
Regions:LocationCtrl.Regions,
}
$scope.RegionLocation = {
Region: $scope.RegionOptions.Regions[0],
}
$scope.CountryOptions = {
Countries:getCountries()
};
$scope.CountryLocation = {
Country: $scope.CountryOptions.Countries[0]
};
$scope.RegionFilter = function (data) {
if($scope.RegionLocation.Region.Region == 'Show All'){
return true;
} else if(data.Region == $scope.RegionLocation.Region.Region){
return true;
} else{
return false;
}
};
$scope.CountryFilter = function (data) {
if($scope.CountryLocation.Country.Country == 'Show All'){
return true;
} else if(data.Country == $scope.CountryLocation.Country.Country){
return true;
} else{
return false;
}
};
function getCountries(){
LocationCtrl.Countries = filterCountries(LocationList);
LocationCtrl.Countries.unshift({
Country: 'Show All'
});
return LocationCtrl.Countries;
};
function filterRegions(arr) {
var f = []
return arr.filter(function(n) {
return f.indexOf(n.Region) == -1 && f.push(n.Region)
})
};
function filterCountries(arr){
var f = [];
return arr.filter(function(n) {
return f.indexOf(n.Country) == -1 && f.push(n.Country)
})
};
}
我也明白我的代碼是不是超級乾淨，也不簡單，所以建議簡化它非常歡迎。
謝謝！
你能告訴LocationList數據？可以有更好，更有效的方法來解決你的問題（通過搜索內部對象），甚至不用寫這些過濾函數。 – Shantanu
以下是列表中對象的2個示例。但名單中又有約1400個。 @Shantanu '[{「LID」：「AB02」，「City」：「Calgary」，「State」：「Alberta」，「Country」：「Canada」，「Region」：「Americas」 「XXXXXX」 經度 「XXXXX}，{」 LID 「：」 AB08" ， 「城市」： 「坎莫爾」， 「國家」： 「阿爾伯塔省」， 「國家」： 「加拿大」， 「地區」： 「美洲」，」緯度 「：XXXXXX，」 經度「：XXXXXXX}' –