Angular Modal Form

angular-modal-form.markdown

Angular Modal Form

A Pen by Tim Arnold on CodePen.

License.

index.html

<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>

script.js

// 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;
      });
    });
  }

})();

scripts

<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>

styles

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />