0
世界中に約1400の場所の一覧があり、ng-repeatを使用して表示しています。私はフィルタ機能を使ってリストを絞り込むためのドロップダウンをしたいので、Region：Americas、Country：Candaなどの場所しか見ることができません。私は適切に動作するようにドロップダウンフィルターを取得しているが、私の問題はドロップダウンの値を変更しています。最初のドロップダウンで地域オプションを選択した場合、国のドロップダウンにはその地域の国のみが必要です。ここでAngularJS 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"、 "都市"： "カルガリー"、 "国" "アルバータ"、 "国" "カナダ"、 "地域"： "アメリカ"、 "緯度カナダ "、"地域 "、"アメリカ "、"カナダ "、"カナダ "、"カナダ "、"カナダ "、"カナダ " Latitude "：XXXXXX、"経度 "：XXXXXXX}、" –