how to implement Depenedent Multiple selectBoxes in Angular js

Question

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>

handle onchange event on your first select box, you should be setting your second select box model on the first onchange event and so on. Or also you can give a try to use $watch for this — G_S
– G_S, Commented Feb 14, 2018 at 8:22

G_S · Accepted Answer · 2018-02-14 09:29:00Z

1

You can use watch on first model object and update second select box model in it.

Added a jsfiddle of the same (and some code snippet below from it)

   $scope.$watch('compare_projectName', function () {
    var scenariosFilterd = GraphData.filter(function (s) {
        return s.projectname == $scope.compare_projectName;
    });

     $scope.scenarios = scenariosFilterd.length > 0 ? scenariosFilterd[0].scenarioList:[]

});

$scope.$watch('compare_scenarioName', function () {
    var filteredversionList = $scope.scenarios.filter(function (c) {
        return c.scenarioName == $scope.compare_scenarioName;
    });
     $scope.versionList = filteredversionList.length > 0 ? filteredversionList[0].versionList:[]

    console.log($scope.versionList, 'cities')
});

http://jsfiddle.net/cct1hjq9/44/

edited Feb 14, 2018 at 9:29

answered Feb 14, 2018 at 8:25

G_S

7,1302 gold badges27 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Raju Over a year ago

initially the the first project Name and releated select boxes needs to be selected but in ur initially all select boxes are empty

G_S Over a year ago

Which one you are expecting to be present intially?

Raju Over a year ago

all select boxes

G_S Over a year ago

can you check it now?.

Raju Over a year ago

initially it's coming but when i select any other option in first select Box other selectboxes are empty i want to update the other select box options and select the first element on that selectbox's

|

Raju · Accepted Answer · 2018-02-14 12:55:29Z

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>

initially the the first project Name and releated select boxes needs to be selected but in ur initially all select boxes are empty
thank you for replay its not working properly third select-box options not updated means its not selected first element it select empty Option some times

Raju · Accepted Answer · 2018-02-14 12:35:28Z

BY using $watch functions we can achieve it.

the sample code

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(){
 debugger

$scope.graph=GraphData;
//console.log("data :::"+GraphData);

$scope.compare_projectName=$scope.graph[0].projectname;
//console.log("Test ::",$scope.graph[0].projectname);

$scope.$watch(scenarioData, function(newVal, oldVal) {
	  debugger
	    $scope.Comapre_scenarioData = newVal;
	    $scope.compare_scenarioName = $scope.Comapre_scenarioData[0].scenarioName;
	 
	});
	
	// watch version_data based on projectName and scenarioName
	$scope.$watch(versionData, function(newVal, oldVal) {
   debugger
	    $scope.Compare_versionData = newVal;
	    $scope.comapre_scenario_version = $scope.Compare_versionData[0];
	    
	});
  }
  
   var scenarioData = function() {
    //debugger
		for ( var i in $scope.graph) {
     debugger
		    if ($scope.graph[i].projectname == $scope.compare_projectName) {
			return $scope.graph[i].scenarioList;
		    }
		}
	    }
	//get Version ListBased on projectName and ScenarioName
	 var versionData = function() {
  //  debugger
		for ( var i in $scope.graph) {
   //  debugger
		    if ($scope.graph[i].projectname == $scope.compare_projectName) {
			var scenarioObject = $scope.graph[i].scenarioList;
			for ( var j in scenarioObject) {
          // debugger

			    if (scenarioObject[j].scenarioName == $scope.compare_scenarioName) {
				return scenarioObject[j].versionList;
			    }
			}
		    }
		}
	    }

}

.row {
	margin-right: -2px;
	margin-left: -2px;
	margin-top: 5px;
	margin-bottom: -5px;
}
.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-group .panel-heading {
    border-bottom: 0;
}

.panel-normal>.panel-heading {
    color: #26A69B;
    background-color: #FFFFFF;
    border-bottom: 1px solid #EAEAEA !important;
}


.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.panel-heading {
    font-size: 16px;

<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" 
  data-ng-options="scenarioData.scenarioName as scenarioData.scenarioName for  scenarioData in  Comapre_scenarioData">
		                       
		                     </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"
                    data-ng-options="versionData as versionData for  versionData in  Compare_versionData"    
                        >
                      
							   </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>

there is another answer that @saman.firouzi suggested. You can take a look at it

Collectives™ on Stack Overflow

how to implement Depenedent Multiple selectBoxes in Angular js

3 Answers 3

7 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related