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}' –