如何在Angular js中实现依赖的多选框
how to implement Depenedent Multiple selectBoxes in Angular js
我有那 3 个场景 selectBox 可用 每个 selectBox 选项根据其他 SelectBoxoptions 更改 如果我们 select 其他 [=31= 如何动态更改选项]框选项
我的 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>
您可以在第一个模型对象上使用 watch 并更新其中的第二个 select 盒子模型。
添加了相同的 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')
});
以下代码可能适合您：
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>
BY using $watch functions we can achieve it.
示例代码
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>
我有那 3 个场景 selectBox 可用 每个 selectBox 选项根据其他 SelectBoxoptions 更改 如果我们 select 其他 [=31= 如何动态更改选项]框选项
我的 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>
您可以在第一个模型对象上使用 watch 并更新其中的第二个 select 盒子模型。
添加了相同的 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')
});
以下代码可能适合您：
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>
BY using
$watchfunctions we can achieve it.
示例代码
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>