如何在Angular js中实现Depenedent Multiple selectBoxes

时间：2018-02-14 08:12:13

标签： javascript jquery angularjs jquery-selectbox

我有3个selectBoxs可用的场景每个selectBox选项都根据其他SelectBoxoptions更改，如果我们选择其他selectBox选项，如何动态更改选项

我的JSON格式:: 

[
    {
      "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
          ]
        }
      ]
    }
  ]

示例代码段 

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>

3 个答案:

答案 0 :(得分：1)

您可以在第一个模型对象上使用watch并更新其中的第二个选择框模型。

添加了相同的jsfiddle（以及下面的一些代码片段）

   $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/

答案 1 :(得分：0)

以下代码可能适合您：

＆＃13;
＆＃13; 
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
                        ]
                    }
                ]
            }
        ];


}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

  

通过使用$watch函数，我们可以实现它。

示例代码 

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>

相关问题
最新问题