это просто JSON format.you может передать этот JSON для страны, государства и города листинга.
$scope.countryList=[
{
"_id" : "56cbdb338d82d44e4ac2c814",
"name" : "India"
},
{
"_id" : "56cc6d8a8d82d44e4ac2c81a",
"name" : "Pakistan"
}];
$scope.stateList=[
{
"_id" : "56cc592a8d82d44e4ac2c816",
"name" : "Maharashtra",
"country" : {
"_id" : "56cbdb338d82d44e4ac2c814",
"name" : "India"
}
},
{
"_id" : "56cc594f8d82d44e4ac2c817",
"name" : "Bihar",
"country" : {
"_id" : "56cbdb338d82d44e4ac2c814",
"name" : "India"
}
},
{
"_id" : "56cc59688d82d44e4ac2c818",
"name" : "Andra-Pradesh",
"country" : {
"_id" : "56cbdb338d82d44e4ac2c814",
"name" : "India"
}
},
{
"_id" : "56cc59788d82d44e4ac2c819",
"name" : "Telangana",
"country" : {
"_id" : "56cbdb338d82d44e4ac2c814",
"name" : "India"
}
},
{
"_id" : "56cc6dff8d82d44e4ac2c81b",
"name" : "Peshavar",
"country" : {
"_id" : "56cc6d8a8d82d44e4ac2c81a",
"name" : "Pakistan"
}
}];
$scope.cityList=[
{
"_id" : "56cc7000f9b3225d8885e6c6",
"name" : "Nanded",
"state" : {
"_id" : "56cc592a8d82d44e4ac2c816",
"name" : "Maharashtra"
}
},
{
"_id" : "56cc7000f9b3225d8885e6c7",
"name" : "Pune",
"state" : {
"_id" : "56cc592a8d82d44e4ac2c816",
"name" : "Maharashtra"
}
},
{
"_id" : "56cc7000f9b3225d8885e6c8",
"name" : "Satara",
"state" : {
"_id" : "56cc592a8d82d44e4ac2c816",
"name" : "Maharashtra"
}
},
{
"_id" : "56cc71d3f9b3225d8885e6c9",
"name" : "Patna",
"state" : {
"_id" : "56cc594f8d82d44e4ac2c817",
"name" : "Bihar"
}
},
{
"_id" : "56cc7211f9b3225d8885e6ca",
"name" : "Adilabad",
"state" : {
"_id" : "56cc59788d82d44e4ac2c819",
"name" : "Telangana"
}
},
{
"_id" : "56cc7224f9b3225d8885e6cb",
"name" : "Tirupati",
"state" : {
"_id" : "56cc59688d82d44e4ac2c818",
"name" : "Andra-Pradesh"
}
},
{
"_id" : "56cc7224f9b3225d8885e6cc",
"name" : "PK-City1",
"state" : {
"_id" : "56cc6dff8d82d44e4ac2c81b",
"name" : "Peshavar"
}
}];
$scope.tehsilList=[
{
"_id" : "56d80ce2a5094af2ad65e2ac",
"name" : "Bhainsa",
"city" : {
"_id" : "56cc7211f9b3225d8885e6ca",
"name" : "Adilabad"
}
},
{
"_id" : "56d80d7da5094af2ad65e2ad",
"name" : "Mudhol",
"city" : {
"_id" : "56cc7211f9b3225d8885e6ca",
"name" : "Adilabad"
}
},
{
"_id" : "56d80deaa5094af2ad65e2ae",
"name" : "Tirupati",
"city" : {
"_id" : "56cc7224f9b3225d8885e6cb",
"name" : "Tirupati"
}
},
{
"_id" : "56d80ea4a5094af2ad65e2af",
"name" : "PK-City1-Tehsil1",
"city" : {
"_id" : "56cc7224f9b3225d8885e6cc",
"name" : "PK-City1"
}
},
{
"_id" : "56d80f17a5094af2ad65e2b0",
"name" : "Dhanapur",
"city" : {
"_id" : "56cc71d3f9b3225d8885e6c9",
"name" : "Patna"
}
},
{
"_id" : "56d80fe8a5094af2ad65e2b1",
"name" : "Satara",
"city" : {
"_id" : "56cc7000f9b3225d8885e6c8",
"name" : "Satara"
}
},
{
"_id" : "56d81025a5094af2ad65e2b2",
"name" : "Pune",
"city" : {
"_id" : "56cc7000f9b3225d8885e6c7",
"name" : "Pune"
}
},
{
"_id" : "56d8103ba5094af2ad65e2b3",
"name" : "Baramati",
"city" : {
"_id" : "56cc7000f9b3225d8885e6c7",
"name" : "Pune"
}
},
{
"_id" : "56d81091a5094af2ad65e2b4",
"name" : "Kinwat",
"city" : {
"_id" : "56cc7000f9b3225d8885e6c6",
"name" : "Nanded"
}
},
{
"_id" : "56d8109fa5094af2ad65e2b5",
"name" : "Loha",
"city" : {
"_id" : "56cc7000f9b3225d8885e6c6",
"name" : "Nanded"
}
},
{
"_id" : "56d810c1a5094af2ad65e2b6",
"name" : "Nanded",
"city" : {
"_id" : "56cc7000f9b3225d8885e6c6",
"name" : "Nanded"
}
}];
Это пример приложения, которое я сделал для каскадных и с разной формой контроля в угловых.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/style/template.css" />
<link rel="stylesheet" type="text/css" href="resources/style/sticky-footer.css">
<script type="text/javascript" src="resources/js/mkcljs.js"></script>
<script src="resources/js/angular.min.js"></script>
<script src="resources/js/angular-ui-router.min.js"></script>
<script src="resources/js/checklist-model.js"></script>
<title>Sample Form</title>
</head>
<body class="site com_content view-form layout-edit task"
data-target=".navbar" data-spy="scroll" ng-app="userListA" >
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="brand active" href="/"> Sample App </a>
<nav class="nav-collapse collapse">
<!-- Root menus starts here -->
<div id="menu">
<ul class="nav">
<li><a ui-sref="home">Home Page</a></li>
<li><a ui-sref="masterData">Master Data</a></li>
<li><a ui-sref="addItem">Add Item Data</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<div class="body">
<!-- Container started -->
<div class="container">
<div class="header">
<div class="header-inner" > <ui-view>
<br> <br>
</div>
</div>
<div class="row-fluid">
</div>
</div>
</div>
<div id="push"></div>
</div>
<!--<div id="dob_datepic" class="date">
<input placeholder="DD/MM/YYYY" readonly="readonly">
<span class="add-on" id="icon"><i class="icon-calendar"></i></span>
</div>
<script type="text/javascript">
$(function(){
$("#dob_datepic").datepicker({
format:"dd/mm/yyyy",
autoclose:true,
});
});
</script>-->
<script type="text/javascript">
var parentModule=angular.module("userListA",["ui.router","checklist-model"]);
parentModule.config(function($stateProvider,$urlRouterProvider){
//$urlRouterProvider.otherwise("/addItem");
$stateProvider
.state('addItem',{
url:'/addItem',
templateUrl:'htmlviews/validations.html',
controller:'validationCtr'
}).state('masterData',{
url:'masterData',
templateUrl:'htmlviews/masterData.html',
controller:'masterDataCtr'
}).state('viewData',{
url:'/viewItemData',
templateUrl:'htmlviews/ViewData.html',
controller:'viewDataCtr'
}).state('masterData.addstate',{
url:'/addstate',
templateUrl:'htmlviews/addState.html',
controller:'addStateCtr'
});
});
parentModule.controller("validationCtr",function($scope,$http,$window){
$scope.getDatafromDB=function(){
$http({
url:"demouser/getAllDatafromDB",
method: "GET",
}).success(function(data,status){
$scope.itemLocalList=data;
$scope.isUpdate=true;
$scope.isDelete=true;
}).error(function(data,status){
});
};
$scope.clearLocalStorage=function(){
$window.localStorage.removeItem("itemList");
$scope.itemLocalList={};
};
if($window.localStorage.getItem('itemList')!=null)
{
console.log("in local list");
$scope.itemLocalList=JSON.parse($window.localStorage.getItem("itemList"));
$scope.isUpdate=false;
$scope.isDelete=false;
console.log($scope.itemLocalList);
}
else
{
$scope.getDatafromDB();
}
$http({
url:"demouser/getHobbies",
method: "GET",
}).success(function(data,status){
$scope.hobbies=data;
console.log($scope.hobbies);
}).error(function(data,status){
alert("error");
});
$http({
url:"demouser/getCountries",
method: "GET",
}).success(function(data,status){
$scope.conutries=data;
console.log($scope.conutries);
}).error(function(data,status){
alert("error");
});
//$scope.item=JSON.parse($window.localStorage.getItem("item"));
$http({
url:"demouser/getCountrywiseState",
method: "GET",
}).success(function(data,status){
$scope.states=data;
console.log($scope.states);
}).error(function(data,status){
alert("error");
});
$scope.savetolocal=function(){
var items=[];
if($window.localStorage.getItem("itemList")!=null)
{
items.push.apply(items,JSON.parse($window.localStorage.getItem("itemList")));
}
items.push($scope.item);
$window.localStorage.setItem("itemList",JSON.stringify(items));
$scope.item={};
//$scope.itemLocalList=JSON.parse($window.localStorage.getItem('itemList'));
//console.log("itemLocalList"+ $scope.itemLocalList);
};
$scope.savetoDB=function()
{
$http({
url: "demouser/saveBulkData",
method: "POST",
data: JSON.parse($window.localStorage.getItem("itemList"))
}).success(function(data,status){
console.log("Data synced to database sucessfully");
$scope.getDatafromDB();
$scope.clearLocalStorage();
}).error(function(data,status){
console.log("failure");
})
};
$scope.updateRecordinDB=function(item){
$http({
url: "demouser/updateRecord",
method: "POST",
data: item
}).success(function(data,status){
console.log("Data upadted to database sucessfully");
$scope.item={};
}).error(function(data,status){
console.log("failure");
})
}
$scope.deleteItem=function(item){
$http({
url: "demouser/deleteRecord",
method: "POST",
data: item
}).success(function(data,status){
console.log("Data deleted to database sucessfully");
$scope.item={};
}).error(function(data,status){
console.log("failure");
})
}
$scope.getItem=function(itm){
$scope.item=itm;
}
});
parentModule.controller("masterDataCtr",function($scope,$http,$window){
});
parentModule.controller("addStateCtr",function($scope,$http,$window){
$http({
url:"demouser/getCountries",
method: "GET",
}).success(function(data,status){
$scope.conutries=data;
console.log($scope.conutries);
}).error(function(data,status){
alert("error");
});
});
</script>
<!-- Footer -->
<div class="footer">
<div class="container">
<hr />
<p class="pull-right">
<a href="#" id="back-top">Back To Top</a>
</p>
<p>©Copyright 2014-15 Maharashtra Knowledge Corporation Ltd.
All Rights Reserved.</p>
</div>
</div>
</body>
</html>
<form class="form-horizontal" name="frm">
<div class="control-group">
<label class="control-label required">Item Name</label>
<div class="controls">
<input type="text" ng-model="item.itemName" name="itemName" ng-minlength="3" ng-maxlength="25" required/>
<span ng-show="(frm.itemName.$error.required || frm.itemName.$error.minlength || frm.itemName.$error.maxlength) && frm.itemName.$dirty">Please fill the item name.</span>
</div>
</div>
<div class="control-group">
<label class="control-label required">Item Code</label>
<div class="controls">
<input type="number" ng-model="item.itemCode" name="itemCode" ng-min="18" ng-max="100" required/>
<span ng-show="(frm.itemCode.$error.required || frm.itemCode.$error.min || frm.itemCode.$error.max) && frm.itemCode.$dirty ">Please fill the item code with valid number.</span>
</div>
</div>
<div class="control-group">
<label class="control-label required">Email</label>
<div class="controls">
<input type="email" ng-model="item.email" name="email" ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" required/>
<span ng-show="(frm.email.$error.required || frm.email.$error.pattern) && frm.email.$dirty ">Please enter valid email address.</span>
</div>
</div>
<div class="control-group">
<label class="control-label required">Gender</label>
<div class="controls">
<input type="radio" ng-model="item.gender" name="gender" value="M" required>Male</input>
<input type="radio" ng-model="item.gender" name="gender" value="F" required>Female</input>
<span ng-show="frm.gender.$error.required && frm.gender.$dirty ">Please enter valid email address.</span>
</div>
</div>
<div class="control-group">
<label class="control-label required">Gender</label>
<div class="controls">
<label ng-repeat="hobby in hobbies">
<input type="checkbox" checklist-model="item.hobbies" checklist-value="hobby" name="hobby" >{{hobby.name}}</input>
</label>
<div class="control-group">
<label class="control-label required">Country</label>
<div class="controls">
<select ng-options="country as country.name for country in conutries track by country.name" ng-model="item.conutries" >
<option value="">Select Country</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label required">State</label>
<div class="controls">
<select ng-disabled="!item.conutries" ng-options="state as state.name for state in states | filter:{$:item.conutries.name} track by state.name" ng-model="item.states" >
<option value="">Select State</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label required">DOB</label>
<div class="controls">
<div class="date" id="datepicker_dateOfBirth">
<input ng-model="item.dob" name="dob" placeholder="DD/MM/YY" readonly="true" required>
<span class="add-on" id="icon"><i class="icon-calendar"></i></span></div>
</div>
</div>
<br/>
<div class="controls">
<button type="submit" class="btn btn-success" ng-click="savetolocal()">Save to Local</div>
<button ng-show="isUpdate" type="submit" class="btn btn-success" ng-click="updateRecordinDB(item)">Update</div>
</form>
<div ng-if="itemLocalList.length>0">
Search:<input type="text" ng-model="searchText"/>
<table class="table table-bordered table-striped" >
<thead>
<tr>
<td>Item Name</td>
<td>Code</td>
<td>Cust Email</td>
<td>Gender </td>
<td>dob </td>
<td>Hobbies</td>
<td>Country</td>
<td>State</td>
<td>Update</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="itm in itemLocalList | orderBy: ['itemName','itemCode'] | filter :{itemName: searchText}" >
<td>{{itm.itemName}}{{itm._id}} </td>
<td>{{itm.itemCode}} </td>
<td>{{itm.email}} </td>
<td>{{itm.gender}} </td>
<td>{{itm.dob}} </td>
<td><label ng-repeat="hby in itm.hobbies">{{hby.name}} </label> </td>
<td>{{itm.conutries.name}} </td>
<td>{{itm.states.name}} </td>
<td><button ng-show="isUpdate" ng-click="getItem(itm)">Update</button></td>
<td><button ng-show="isDelete" ng-click="deleteItem(itm)">Delete</button></td>
</tr>
</tbody>
</table>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn btn-success" ng-click="savetoDB()">Sync Data to DB</div>
</div>
</div>
</div>
</div>
</div>
<div id="push"></div>
</div>
<!--<div id="dob_datepic" class="date">
<input placeholder="DD/MM/YYYY" readonly="readonly">
<span class="add-on" id="icon"><i class="icon-calendar"></i></span>
</div>-->
<script type="text/javascript">
$(function(){
$("#datepicker_dateOfBirth").datepicker({
format:"dd/mm/yyyy",
autoclose:true,
});
});
</script>
package mkcl.os.apps.controllers;
import java.text.SimpleDateFormat;
import java.util.Date;
import mkcl.os.apps.services.NoSQLCrudService;
import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("demouser")
public class UserController {
@InitBinder
public void initBinder(WebDataBinder binder) {
SimpleDateFormat dateFormat = new SimpleDateFormat("dd/MM/yyyy");
dateFormat.setLenient(false);
binder.registerCustomEditor(Date.class, new CustomDateEditor(dateFormat, true));
}
@ResponseBody
@RequestMapping(value = "saveUserAJAX", method = RequestMethod.POST)
public void saveCandidate(@RequestBody String user) {
NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
modelLessCrudService.saveCollection("user", user);
}
@ResponseBody
@RequestMapping(value = "getUserAJAX", method = RequestMethod.GET)
public String getUserAJAX(@RequestParam String id) {
NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
String user=modelLessCrudService.findOne("user", id);
return user;
}
@ResponseBody
@RequestMapping(value = "getHobbies", method = RequestMethod.GET)
public String getHobbies() {
NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
String hobbs=modelLessCrudService.getAllRecords("hobbies");
return hobbs;
}
@ResponseBody
@RequestMapping(value = "getCountries", method = RequestMethod.GET)
public String getCountries() {
NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
String cntryList=modelLessCrudService.getAllRecords("country");
return cntryList;
}
@ResponseBody
@RequestMapping(value = "getCountrywiseState", method = RequestMethod.GET)
public String getCountrywiseState() {
NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
String stateList=modelLessCrudService.getAllRecords("state");
return stateList;
}
@ResponseBody
@RequestMapping(value = "saveBulkData", method = RequestMethod.POST)
public void saveBulkData(@RequestBody String itemList) {
NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
modelLessCrudService.saveCollection("itemList", itemList);
}
@ResponseBody
@RequestMapping(value = "updateRecord", method = RequestMethod.POST)
public void updateRecord(@RequestBody String item) {
NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
modelLessCrudService.save("itemList", item);
}
@ResponseBody
@RequestMapping(value = "deleteRecord", method = RequestMethod.POST)
public void deleteRecord(@RequestBody String item) {
NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
modelLessCrudService.delete("itemList", item);
}
@ResponseBody
@RequestMapping(value = "getAllDatafromDB", method = RequestMethod.GET,produces="application/json;charset=utf-8;")
public String getAllDatafromDB() {
NoSQLCrudService modelLessCrudService=new NoSQLCrudService();
String itemList=modelLessCrudService.getAllRecords("itemList");
return itemList;
}
}