I have scenario in That 3 selectBoxs are available Each selectBox Options are changed based on other SelectBoxoptions how to change Options dynamically if we select other selectBox options
My JSON FORMAT ::
[
{
"projectname": "test1",
"scenarioList": [
{
"scenarioName": "test_scenario1",
"versionList": [
0.1,
0.2,
0.3,
0.4
]
},
{
"scenarioName": "test_scenario2",
"versionList": [
0.1,
0.2
]
}
]
},
{
"projectname": "test2",
"scenarioList": [
{
"scenarioName": "test2_scenario1",
"versionList": [
0.1,
0.3
]
}
]
}
]
Sample snippet
var userModule = angular.module("UserModule",[]);
userModule.controller("dashboardController",["$scope",
dashboardControllerFun ]);
function dashboardControllerFun($scope){
debugger
var GraphData=[];
GraphData=
[
{
"projectname": "test1",
"scenarioList": [
{
"scenarioName": "test_scenario1",
"versionList": [
0.1,
0.2,
0.3,
0.4
]
},
{
"scenarioName": "test_scenario2",
"versionList": [
0.1,
0.2
]
}
]
},
{
"projectname": "test2",
"scenarioList": [
{
"scenarioName": "test2_scenario1",
"versionList": [
0.1,
0.3
]
}
]
}
]
$scope.load=function(){
$scope.graph=GraphData;
console.log("data :::"+$scope.graph);
$scope.compare_projectName=$scope.graph[0].projectname;
}
} <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js">
</script>
</head>
<div class="row" ng-app="UserModule" ng-controller="dashboardController" data-ng-init="load()">
<div class="col-md-12 col-xs-12">
<div class="panel-group">
<div class="panel panel-normal">
<div class="panel-heading">Graphical View of Scenarios</div>
<div class="panel-body" style="min-height:200px;">
<div class="col-md-3 col-xs-12">
<label class="control-label col-sm-3">Projects: </label>
<div class="col-sm-9">
<select class="form-control" data-ng-model="compare_projectName"
data-ng-options=" report.projectname as report.projectname for report in graph" >
</select>
</div>
</div>
<div class="col-md-4 col-xs-12">
<label class="control-label col-sm-3">Scenario Name: </label>
<div class="col-sm-9">
<select class="form-control" data-ng-model="compare_scenarioName"
>
</select>
</div>
</div>
<div class="col-md-3 col-xs-12">
<label class="control-label col-sm-4">Iteration: </label>
<div class="col-sm-8">
<select class="form-control" ng-model="comapre_scenario_version"
>
</select>
</div>
</div>
<div class="col-md-1 col-xs-12">
<br>
<button class="btn-primary" type="submit">Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
console data:
</div>
</div>
The below code may works for you :
var userModule = angular.module("UserModule", []);
userModule.controller("dashboardController", ["$scope",
dashboardControllerFun]);
function dashboardControllerFun($scope) {
$scope.firstSelect = '0';
$scope.secSelect = '0';
$scope.thSelect = '0';
$scope.graph = [];
$scope.graph =
[
{
"projectname": "test1",
"scenarioList": [
{
"scenarioName": "test_scenario1",
"versionList": [
0.1,
0.2,
0.3,
0.4
]
},
{
"scenarioName": "test_scenario2",
"versionList": [
0.1,
0.2
]
}
]
},
{
"projectname": "test2",
"scenarioList": [
{
"scenarioName": "test2_scenario1",
"versionList": [
0.1,
0.3
]
}
]
}
];
}<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js">
</script>
<script src="script.js"></script>
</head>
<div class="row" ng-app="UserModule" ng-controller="dashboardController">
<div class="col-md-12 col-xs-12">
<div class="panel-group">
<div class="panel panel-normal">
<div class="panel-heading">Graphical View of Scenarios</div>
<div class="panel-body" style="min-height:200px;">
<div class="col-md-3 col-xs-12">
<label class="control-label col-sm-3">Projects: </label>
<div class="col-sm-9">
<select class="form-control" ng-model="firstSelect" ng-change="thSelect='0';secSelect='0'">
<option ng-repeat="a in graph" value="{{$index}}">{{a.projectname}}</option>
</select>
</div>
</div>
<div class="col-md-4 col-xs-12">
<label class="control-label col-sm-3">Scenario Name: </label>
<div class="col-sm-9">
<select class="form-control" ng-model="secSelect" ng-change="thSelect='0'">
<option ng-repeat="b in (graph[firstSelect].scenarioList)" value="{{$index}}">
{{b.scenarioName}}
</option>
</select>
</div>
</div>
<div class="col-md-3 col-xs-12">
<label class="control-label col-sm-4">Iteration: </label>
<div class="col-sm-8">
<select class="form-control" ng-model="thSelect">
<option ng-repeat="c in (graph[firstSelect].scenarioList[secSelect].versionList)"
value="{{$index}}">{{c}}
</option>
</select>
</div>
</div>
<div class="col-md-1 col-xs-12">
<br>
<button class="btn-primary" type="submit">Submit
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
console data:
</div>
</div>