Angularjs Bootstrap Modal Directive Example
Angularjs form inside bootstrap modal popup step By Step Example
How to Create a Dynamic Modal Directive in Minutes using Angular and UI Bootstrap Example
How to Create a Dynamic Modal Directive in Minutes using Angular and UI Bootstrap Example
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body>
<div class="main-container ace-save-state" id="main-container">
<div class="main-content">
<div class="main-content-inner">
<div class="page-content">
<div class="row">
<div class="col-xs-12">
<div ng-controller="RoleViewCtrlq">
<div class="container">
<form name="profileformAdd">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" id="myModal">
<div class="modal-content" style="margin-top:135px">
<div class="modal-header">
<h4 class="modal-title pull-left"> Add New Role</h4>
<button type="button" class="close pull-right"
data-dismiss="modal" aria-hidden="true">
x
</button>
</div>
<div class="modal-body">
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>Role<span style="color:green;">*</span></strong></h6>
</div>
<div class="col-xs-9">
<input type="text" required name="RoleName" placeholder="Role Name"
class="form-control" ng-model="Role.RoleName" ng-change="verifyRoleDuplicate()" />
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong> Description</strong></h6>
</div>
<div class="col-xs-9">
<textarea name="Description" placeholder="Empty" style="width: 100%; max-height: 200px; max-width: 100%;" ng-model="Role.Description" maxlength="255"></textarea>
</div>
</div>
<div class="row" style="margin-bottom:1%">
<div class="col-xs-3">
<h6><strong>IsActive?</strong></h6>
</div>
<div class="col-xs-9">
<input type="checkbox" name="IsActive" class="form-control" ng-model="Role.IsActive" style="width:20px;" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<button type="button" data-toggle="modal" data-target="#myModal" class="btn btn-sm btn-primary btn-create">Add New Role</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
var liveapp = angular.module("liveapp", ['ui.bootstrap']);
liveapp.controller('livectrl', ['$scope', '$modalInstance', '$modal',
function ($scope, $modalInstance, $modal) {
$scope.open = function () {
debugger;
var modalInstance = $modal.open();
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
}
]);