<!doctype html>
<html ng-app="demoApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="script.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DirectiveDemoCtrl as demoCtrl">
<h2>First Form</h2>
<div>
<demo-directive data="demoCtrl.firstForm" ctrl="demoCtrl" formname="firstFormName"></demo-directive>
</div>
<div ng-if="demoCtrl.firstForm">
<table class="table table-bordered table-hover">
<thead>
<tr class="background-color-f7f7f7">
<th>Address Type</th>
<th>Last Name</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><span ng-bind="demoCtrl.firstForm.addressType.desc"></span></td>
<td><span ng-bind="demoCtrl.firstForm.lname"></span></td>
<td><span ng-bind="demoCtrl.firstForm.fname"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div ng-controller="DirectiveTestCtrl as testCtrl">
<h2>Second Form</h2>
<div>
<demo-directive data="testCtrl.secondForm" ctrl="testCtrl" formname="secondFormName"></demo-directive>
</div>
<div ng-if="testCtrl.secondForm">
<table class="table table-bordered table-hover">
<thead>
<tr class="background-color-f7f7f7">
<th>Address Type</th>
<th>Last Name</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><span ng-bind="testCtrl.secondForm.addressType.desc"></span></td>
<td><span ng-bind="testCtrl.secondForm.lname"></span></td>
<td><span ng-bind="testCtrl.secondForm.fname"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
angular.module('demoApp', ['ui.bootstrap']);
angular.module('demoApp').directive('demoDirective', function() {
return {
restrict: 'E',
replace: true,
scope: {
data: '=',
ctrl: '=',
formname: '='
},
templateUrl: 'template.html'
};
});
angular.module('demoApp').factory('dataService', function() {
return {
getAddressType: function() {
var addressData = [{
'id': '1',
'desc': 'Home'
}, {
'id': '2',
'desc': 'Office'
}];
return addressData;
}
}
});
angular.module('demoApp').controller('DirectiveDemoCtrl', ['dataService',
function(dataService) {
var demoCtrl = this;
demoCtrl.addressList = dataService.getAddressType();
demoCtrl.addFormData = function(){
console.log('Form data', demoCtrl.firstForm);
};
}
]);
angular.module('demoApp').controller('DirectiveTestCtrl', ['dataService',
function(dataService) {
var testCtrl = this;
testCtrl.addressList = dataService.getAddressType();
testCtrl.addFormData = function(){
console.log('Form data', testCtrl.secondForm);
};
}
]);
/* Styles go here */
<div class="clearfix">
<form role="form" name="formname" ng-submit="ctrl.addFormData()">
<div class="container bold-text padding-bottom-10px padding-top-10px">
Form Details
</div>
<div class="clearfix">
<div class="col-md-12 form-horizontal padding-top-10px">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-5 control-label text-right"><i class="fa fa-asterisk font-color-e93207 margin-right-5px"></i>Address Type :</label>
<div class="col-sm-7">
<select class="form-control" ng-model="data.addressType" ng-options="eachtype.desc for eachtype in ctrl.addressList">
<option value="">--Select One--</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label text-right">Last Name :</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="data.lname">
</div>
</div>
<div class="form-group">
<div ng-class="{'has-error': formname.firstname.$invalid}">
<label class="col-sm-5 control-label text-right">First Name :</label>
<div class="col-sm-7">
<input type="text" name="firstname" class="form-control" ng-model="data.fname" ng-pattern="/^[a-zA-Z]*$/">
<span class="help-block" ng-show="formname.firstname.$error.pattern">Invalid Pattern.</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-primary">
Add Data
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>