861
Hello to all, In this post, I will tell you, How to open Open Bootstrap Modal Angularjs ng-click event?
Angularjs and Bootstrap both are very famous.
Here is working and tested code for Open Bootstrap Modal Angularjs ng-click event:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app="myApp">
<!--Angular Js Code -->
<div ng-controller="myCtrl">
<button ng-click='selectMe($event)' class="btn btn-info btn-lg">Click Me!!</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selectMe = function (event){
$("#myModal").modal("show");
}
});
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
If you have any query related to Angularjs and Bootstrap then feel free to ask.
6 comments
It doesn’t work to me 🙁
Can you please tell me the issue and or I think, you have added latest version CDN’s.
Thank you
I checked and it is working 🙂
angular.js:14800 TypeError: $(…).modal is not a function
Please use latest CND’s.
Thanks
It is working for me 🙂