Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Angular Modal Form
<div ng-app="myApp" ng-controller="MainCtrl as vm" class="container">
<!-- Heading -->
<h1>Spelling Modal</h1>
<button ng-click="vm.toggleModal()" class="btn btn-default">Show Words</button>
<!-- Modal Form -->
<modal title="Misspelled Words" visible="vm.showModal">
<div ng-repeat="chapter in chapters">
<button ng-click='save(chapter)'>Save</button>
<tr><td>Name: {{chapter.name}}{{chapter}}</td>
<div ng-repeat="(word, ignored) in chapter['words']">
<tr>
<td>Word: {{word}} {{ignored}}</td>
<td><input type="checkbox" ng-model="chapter.words[word]"/>
</tr>
</div>
</tr>
</div>
</modal>
</div>
// mainpage.js
(function() {
'use strict'
// Register components
angular.module('myApp', [
'myApp.directives' // Main app module needs myApp.directives
])
.controller('MainCtrl', MainCtrl); // Register MainCtrl
// Define MainCtrl
function MainCtrl() {
var vm = this;
// Bindable members
vm.showModal = false;
vm.toggleModal = toggleModal;
// Define toggleModal
function toggleModal() {
vm.showModal = !vm.showModal;
}
}
})();
// modal.js
(function() {
'use strict'
// Register components to directives module
angular.module('myApp.directives', [])
.directive('modal', modal); // Attach DDO
// Define DDO
function modal() {
return {
template: template,
restrict: 'E',
transclude: true,
replace: true,
scope: false, // Use parent's scope
link: link
}
}
// Define template
var template = '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
'<h4 class="modal-title">{{title}}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude></div>' +
'</div>' +
'</div>' +
'</div>';
// Define link
function link(scope, element, attrs) {
// Grab the title from attrs
scope.title = attrs.title;
scope.save = function(chapter){
alert(chapter['words']['one']);
};
scope.chapters = [
{'name': 'anova', 'words': {one: false, two: false}},
{'name': 'bchoice', 'words': {three: false, four: false}}
];
// Register the watch on the visible attribute
scope.$watch(attrs.visible, function(value) {
if (value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
// Listen for shown.bs.modal event
$(element).on('shown.bs.modal', function() {
scope.$apply(function() {
scope.vm.showModal = true;
});
});
// Listen for hidden.bs.modal event
$(element).on('hidden.bs.modal', function() {
scope.$apply(function() {
scope.vm.showModal = false;
});
});
}
})();
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.