ここで私は国と配列を作成しました。特定の国を選択すると、その国のリストを別の選択タブに表示する必要があります。私は ng-optionの使用
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item for item in names">
</select>
{{selectedName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["India", "US", "UK"];
});
</script>
</body>
</html>
は、私は正しい方向にあなたにヒントを与えるつもりだことをどのように行うことができ、彼らのこれを行う方法のトンがあり、これは現実の世界の例ほど遠いではありません。
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="item for item in names" ng-change="countrySelected()"></select>
{{selectedName}}
<select ng-model="selectedState" ng-options="item for item in states"></select>
{{selectedState}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["India", "US", "UK"];
$scope.states = [];
$scope.countrySelected = function() {
if ($scope.selectedName == "India") {
$scope.states = ["Some", "State"];
}
}
});
</script>
通常は、例えば、バックエンドからの構造化データを持っているでしょう：
[{ country:"US", states: ["One", "Two"]}]
を国が選択されると、状態が他の選択ボックスで使用する必要があります。また、いくつかのIDはバックエンドから来るので、選択したcountryIDとstateIDを完了したらサーバーに送信することができます。
偉大な作業はあなたのソリューションのためにuをありがとう – kishore
いいえ問題は、とstackoverflowへようこそ。その答を合格とマークするようにしてください。 – CularBytes
これは、限られた情報が与えられた多くのソリューションの1つに過ぎないことに注意してください。あなたが国のコレクションあたりの状態のリストを持っていると仮定すると ：
//For example
$scope.listOfStatesPerCountry = {
country: {
name: 'India',
states: ['Northern-India', 'Southern-India']
}
country: {
name: 'US',
states: ['Alabama', 'Kentucky', 'California']
}
}
$scope.getStatesForCountry = function() {
if($scope.selectedCountry) {
return $scope.listOfStatesPerCountry[$scope.selectedCountry];
}
return [];
}
応じHTML
<select ng-model="selectedCountry" ng-options="country for country in listOfStatesPerCountry">
</select>
<select ng-options="state for state in getStatesForCountry()"></select>
をここでは、クエリのソリューションは、最初にあなたがするときの値機能をヒットする必要があります。..です国の変化。次に、その値を比較して状態を取得します。 テストされたコード ..
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-change="selectstate(selectedName)" ng-options="item for item in names">
</select>
<div ng-if='states'>
<select ng-model="selectedState" ng-options="item for item in states">
</select></div>
{{states}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["India", "UK", "US"];
$scope.selectstate = function(value){
if(value=='India'){
$scope.states = ["Chandigarh", "Punjab", "Bihar"];
}else if(value=='UK'){
$scope.states = ["fg", "jg", "fh"];
}else if(value=='US'){
$scope.states = ["fhgfj", "gjffg", "gfjjfg"];
}else{
//do nothing
}
alert(value)
}
});
</script>
<p>This example shows how to fill a dropdown list using the ng-options directive.</p>
</body>
</html>
国ごとの状態のリストがありますか？ –