multiple dropdown json save
http://angularjs.org/
by soumya gangamwar
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
Hello, {{name}}!
<select class="form-control" ng-model="join.sourceTable"
ng-options="stabel.label for stabel in tables">
</select>
<select class="form-control" ng-model="join.targetTable"
ng-options = "ttabel.label for ttabel in tables">
</select>
<select class="form-control" ng-model="join.sourceColumn"
ng-options="scolumn.columnName for scolumn in columns">
</select>
<select class="form-control" ng-model="join.targetColumn"
ng-options = "tcolumn.columnName for tcolumn in columns">
</select>
<a ng-click="addoperation(join)">add</a>
<br>
<table class="table bordered">
<tr>
<th>Source Tabel</th>
<th>Source Column</th>
<th>Target Tabel</th>
<th>Target Column</th>
</tr>
<tr>{{operationInfo}}</tr>
<tr ng-repeat = "info in operationInfo">
<td>{{info.sourceTable.label}}</td>
<td>{{info.sourceColumn.columnName}}</td>
<td>{{info.targetTable.label}}</td>
<td>{{info.targetColumn.columnName}}</td>
</tr>
</table>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
$scope.tables= [{
"label": 'table1'
},
{
"label": 'table2'
},
{
"label": 'table3'
}];
$scope.columns = [
{
"columnName" : 'colname1'
},
{
"columnName" : 'colname2'
},
{
"columnName" : 'colname3'
}
];
$scope.operationInfo=[];
$scope.addoperation = function(join) {
$scope.operationInfo.push(join)
}
}