我有级联选择框，其中的值是使用{J}文件中的ng-options填充的。
HTML代码如下。
<div class="col-sm-4">
<h4>Target Audience</h4>
<div class="col-sm-12 col-pad-fix">
<div class="form-group">
<label class="control-label">Region:</label>
<select id="region" class="form-control" ng-model="cities" ng-options="region for (region, cities) in dataList">
<option value=''>Select</option>
</select>
</div>
</div>
<div class="col-sm-12 col-pad-fix">
<div class="form-group">
<label class="control-label">City:</label>
<select id="city" class="form-control" ng-disabled="!cities" ng-model="resellers" ng-options="city for (city, resellers) in cities">
<option value=''>Select</option>
</select>
</div>
</div>
<div class="col-sm-12 col-pad-fix">
<div class="form-group">
<label class="control-label">Reseller:</label>
<select id="reseller" class="form-control" ng-disabled="!cities || !resellers" ng-model="stores" ng-options="reseller for (reseller, stores) in resellers">
<option value=''>Select</option>
</select>
</div>
</div>
<div class="col-sm-12 col-pad-fix">
<div class="form-group">
<label class="control-label">Store:</label>
<select id="store" class="form-control" ng-disabled="!cities || !resellers || !stores" ng-model="salesTeams" ng-options="store for (store, salesTeams) in stores">
<option value=''>Select</option>
</select>
</div>
</div>
<div class="col-sm-12 col-pad-fix">
<div class="form-group">
<label class="control-label">Sales Team:</label>
<select id="salesTeam" class="form-control" ng-disabled="!cities || !resellers || !stores || !salesTeams" ng-model="dealers" ng-options="salesTeam for salesTeam in salesTeams">
<option value=''>Select</option>
</select>
</div>
</div>
</div>
控制器代码如下
angular.module('App.controllers', [])
.controller('mainController', function($scope, mainAPIservice) {
$scope.dataList = [];
mainAPIservice.getData().success(function (response) {
$scope.dataList = response;
})
});
服务代码如下
app.factory('mainAPIservice', function($http) {
var mainAPI = {};
mainAPI.getData = function() {
return $http({
method: 'GET',
url: 'data/data.json?callback=JSON_CALLBACK'
});
}
return mainAPI;
});
以下是JSON数据结构。
{
"North":{
"Delhi":{
"Delhi R1":{
"Delhi R1 S1":[
"Delhi R1 S1 ST1",
"Delhi R1 S1 ST2",
"Delhi R1 S1 ST3",
"Delhi R1 S1 ST4"
],
"Delhi R1 S2":[
"Delhi R1 S2 ST1",
"Delhi R1 S2 ST2",
"Delhi R1 S2 ST3",
"Delhi R1 S2 ST4"
],
"Delhi R1 S3":[
"Delhi R1 S3 ST1",
"Delhi R1 S3 ST2",
"Delhi R1 S3 ST3",
"Delhi R1 S3 ST4"
]
},
"Delhi R2":{
"Delhi R2 S1":[
"Delhi R2 S1 ST1",
"Delhi R2 S1 ST2",
"Delhi R2 S1 ST3",
"Delhi R2 S1 ST4"
],
"Delhi R2 S2":[
"Delhi R2 S2 ST1",
"Delhi R2 S2 ST2",
"Delhi R2 S2 ST3",
"Delhi R2 S2 ST4"
],
"Delhi R2 S3":[
"Delhi R2 S3 ST1",
"Delhi R2 S3 ST2",
"Delhi R2 S3 ST3",
"Delhi R2 S3 ST4"
]
},
"Delhi R3":{
"Delhi R3 S1":[
"Delhi R3 S1 ST1",
"Delhi R3 S1 ST2",
"Delhi R3 S1 ST3",
"Delhi R3 S1 ST4"
],
"Delhi R3 S2":[
"Delhi R3 S2 ST1",
"Delhi R3 S2 ST2",
"Delhi R3 S2 ST3",
"Delhi R3 S2 ST4"
],
"Delhi R3 S3":[
"Delhi R3 S3 ST1",
"Delhi R3 S3 ST2",
"Delhi R3 S3 ST3",
"Delhi R3 S3 ST4"
]
}
},
"Jaipur":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Lucknow":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Kanpur":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
}
},
"West":{
"Mumbai":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Ahmedabad":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Pune":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Nagpur":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
}
},
"South":{
"Bengaluru":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Hyderabad":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Chennai":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
},
"Kochi":{
"Reseller1":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller2":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
},
"Reseller3":{
"Store1":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store2":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
],
"Store3":[
"Sales Team1",
"Sales Team2",
"Sales Team3",
"Sales Team4"
]
}
}
}
}
级联选择框正常工作，并填充了适当的数据。现在，当我提交表单时，我需要将这些选择框中的选定值发送到后端API。但我无法弄清楚如何检索选定的值。有人可以帮帮我吗？提前谢谢！
这是我创建的plunkr http://embed.plnkr.co/y2ZtbKlOfhtejVobUzHF/preview