How to close a bootstrap modal programmatically using AngularJS - angularjs

I have a tab view which has a button to open a modal.
<button class="btn btn-primary btn-etis" data-toggle="modal" data-target="#addModal">Add</button>
The modal is opened via ng-include and by its referencing its name which is 'addModal'
<div ng-include=" 'register/individual/views/modal/addBookOfAccounts.html' "></div>
Here is my modal code:
<!-- Add BOA Modal-->
<ng-form class="form-etis" name="addBoaForm" method="post">
<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
aria-labelledby="addIdentificationModalLabel" aria-hidden="true"
data-backdrop="static">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="addModalLabel">
<div class="no-margin no-padding">
<i class="fa fa-book"></i> NEW Book of Account Details
</div>
</div>
</div>
<div class="pull-right">
<a class="btn btn-primary btn-etis" href=""
ng-click="ctrl.submitBoaForm()">Ok</a>
<a class="btn btn-danger btn-etis" href=""
data-dismiss="modal" role="button" ng-click="ctrl.closeBoaForm()">Cancel</a>
</div>
inside my controller
self.submitBoaForm = function () {
if (self.isBoaFormValid()) {
self.bookOfAccountsGrid.data.push(self.bookOfAccounts);
self.resetBoaDetails();
alert('New BOA Saved');
} else {
console.log('invalid boa form')
}
}
self.closeBoaForm = function () {
self.showBoaFormValidations = false;
self.resetBoaDetails();
};
I am able to display the modal just by using data-target. My only problem is on how do i close the modal programmatically inside the submitBoaForm() after the alert method?

Related

bootstrap conformation model is not open after 2nd time in AngularJs?

I have to remove the image from the list in the conformation model click on the YES button but after 2nd time model is not open.In the element section after 2nd time click "
<span class="glyphicon glyphicon-remove-sign" data-toggle="modal" data-target="#openImage"></span>
<div id="openImage" class="modal in">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Are you sure???</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this product?</p>
<div class="row">
<div class="col-12-xs text-center">
<button class="btn btn-primary btn-md" ng-click="removeSelectedProductKey($event, productObject.keyId)"> Yes</button>
<button class="btn btn-default btn-md" data-dismiss="close">No</button>
</div>
</div>
</div>
</div>
</div>
</div>
display :none" is apply tell me sir how to resolve this problem?
Try to open your modal by function using:
<span class="glyphicon glyphicon-remove-sign" ng-click="openImg()"></span>
And inside your controller write below function:
function openImg(){
angular.element('#openImage').modal();
}

How to enhance ngSanitize whitelists?

I'm trying to append HTML content from the controller to the view. For this I know that we have to use ngSanitize. Everything is working fine, but it is stripping out the attributes of the HTML elements.
Here is my controller:
var modalVar = '<div class="modal fade" id="deleteModal'+ data.data.id +'" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title">Alert</h4></div><div class="modal-body"><p>Are you sure to delete?</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-danger" ng-click="deleteFunc('+ data.data.id +')" data-dismiss="modal">Yes</button></div></div></div></div>';
$scope.modalsDiv = $scope.modalsDiv + modalVar;
The view:
<div ng-bind-html="modalsDiv"></div>
If I inspect and see the rendered elements, every div element is rendered but their attributes are stripped out.
Controllers should not be adding HTML to the view.
<!--REPLACE ng-html-bind
<div ng-bind-html="modalsDiv"></div>
-->
<!--WITH ng-if -->
<div ng-if="showModal">
<div class="modal fade" id="deleteModal{{data.data.id}} +'" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4 class="modal-title">
Alert
</h4>
</div>
<div class="modal-body">
<p>Are you sure to delete?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button"
class="btn btn-danger"
ng-click="deleteFunc(data.data.id)"
data-dismiss="modal">
Yes
</button>
</div>
</div>
</div>
</div>
</div>
JS
//$scope.modalsDiv = modalVar;
$scope.showModal = true;
Instead of composing HTML in the controller, use the ng-if directive. The code will be much more readable.
try this in your controller:
someVar = $sce.trustAsHtml('someVar');
do not forget to inject $sce into ctrl

Data binding from a partial view in AngularJS

I want to bind a data from partial view to index it is binding in same view but not other view.I tried like this
$scope.GetDelete = function (cy_name) {
$scope.items = cy_name;
//$scope.newItem = { title: '' };
alert($scope.items);
}
<button type="button" class="btn btn-xs btn-danger margin-inline" data-toggle="modal" data-target="#dvDelete" ng-click="GetDelete('#item.cy_name')"><i class="fa fa-trash"></i></button>
<div class="modal fade" id="dvDelete" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
</div>
<div class="modal-body">
<p>{{items}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger"ng-click="GetDelete('Test')">Delete</button>
</div>
</div>
</div>
</div>
Modal is showing but nothing data
For the scope variable to be available within your modal, the modal code needs to fall within the scope of the controller. If it is defined outside the scope, the modal template wouldn't be aware of the existence of the scope.
angular.module('myapp', [])
.controller('myctrl', function($scope) {
$scope.GetDelete = function(cy_name) {
$scope.items = cy_name;
//$scope.newItem = { title: '' };
alert($scope.items);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app='myapp' ng-controller='myctrl' class="modal fade" id="dvDelete" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
</div>
<div class="modal-body">
<p>{{items}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" ng-click="GetDelete('Test')">Delete</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-xs btn-danger margin-inline" data-toggle="modal" data-target="#dvDelete" ng-click="GetDelete('#item.cy_name')"><i class="fa fa-trash"></i>
</button>
Here is a working snippet

Reset the values on Modal box on reload

Reset the values on Modal box on reload
<div class="modal fade" id="detailsModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header custom-modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Create Job Vaccination
</h4>
</div>
<!-- Modal Body -->
<form name="vaccjobctrl.vaccineForm" class="form-inline" >
<div class="modal-body" style="height: 150px">
<div class="row ">
<div class="form-group col-md-12" ng-class="{ 'has-error' : vaccjobctrl.vaccineForm.screeningType.$invalid && (vaccjobctrl.vaccineForm.screeningType.$dirty || vaccjobctrl.vaccineForm.screeningType.$touched) }">
<label for="regId" class="col-md-6">Screening Type:</label>
<span class="col-md-6">
<select style="width: 100%;"
ng-model="vaccjobctrl.vaccineForm.screeningTypeMast.screeningTypeId"
ng-options="sctype.screeningTypeId as sctype.screeningType for sctype in vaccjobctrl.screeningTypeList"
class="form-control field-size ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" name="screeningType"
id="screeningType" required>
<option value="">--SELECT--</option>
<option value="{{sctype.screeningTypeId}}">{{sctype.screeningType}}</option>
</select>
</span>
<div class="col-sm-6 error-color"
ng-if="vaccjobctrl.interacted(vaccjobctrl.vaccineForm.screeningType)"
ng-messages="vaccjobctrl.vaccineForm.screeningType.$error">
<div ng-messages-include="src/common/validation-messages.html"></div>
</div>
</div>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary-joli" ng-click="vaccjobctrl.saveJobVaccination(vaccjobctrl.vacc);" ng-disabled="vaccjobctrl.vaccineForm.$invalid" data-dismiss="modal">
Create Vaccination
</button>
</div>
</form>
</div>
</div>
</div>
this is the modal box.
On click on open Modal this function will be called
vm.showModal = function() {
$('#detailsModal').modal('show');
};
values in the select box are pre-populated, on reopening the modal box it show the previously selected values. If trying to clear that the the select box border color changed to red on reopen.
In Bootstrap 3 you can reset your form after your modal window has been closed as follows:
$('.modal').on('hidden.bs.modal', function(){
$(this).find('form')[0].reset();
});
You can just reset any content manually when modal is hidden.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class='modal-body1'>
<h3>Close and open, I will be gone!</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can use:
$(".modal").on("hidden.bs.modal", function(){
$(".modal-body1").html("");
});
You can do more like:
$(document).ready(function() {
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body1").html("Where did he go?!?!?!");
});
});
There are more about them in http://getbootstrap.com/javascript/#modals-usage.
UPDATE AS PER YOUR NEED:
If you want to do it angular way, use the jquery src above angularjs source in index.html. You can simply use the jquery functions inside the angularjs controller.
Working JsFiddle: http://jsfiddle.net/tnq86/15/
For using document.ready function in angular.
angular.module('MyApp', [])
.controller('MyCtrl', [function() {
angular.element(document).ready(function () {
document.getElementById('msg').innerHTML = 'Hello';
});
}]);
However Creating directive is the right way to do it. Follow the link to get some help with creating directive to execute jquery functions in angularjs.
jquery in angularjs using directive

closing the browser after clicking the modal button using angularjs

I have a modal window containing the 'close' button, I need to close the browser once i click on the close button. how do i achieve using angular js.
I tried using $window service but no luck.
<div class="modal" id="alertModal" data-keyboard="true" role="dialog" tabindex="-1">
<div class="modal-dialog text-left" style="width:40%">
<div class="modal-content">
<div class="modal-header">
<h3>{{title}}</h3>
</div>
<div class="modal-body">
<div class="alert-danger" style="padding:10px; font-size:13px"><span ng-bind-html="content"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="closeBrowser();">Close</button>
</div>
</div>
</div>
</div>
controller
$scope.closeBrowser = function(){
$window.close();
}
try this:
function closeWindow() {
window.open('','_parent','');
window.close();
}

Resources