CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapbootstrap-modal
David Parsonson
David Parsonson

Reputation: 575

pulling user input from modal form (angular)

I currently have a modal form setup and working nicely how i want it but now i need to grab the information inputed into textboxes and selections by the user and im sort of lost as to where i need to start. below is the code for my modal form in entirity. I'm not necessarily looking for a direct answer but to be pointed in the right direction of more information though examples would be greatly appreciated.

<div ng-app='plunker' ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3>Create a new post</h3>
    </div>
    <form name="modalForm">
    <div class="modal-body">
      <div class="form-group" ng-class="{ 'has-error': modalForm.modalInput.$invalid }" >
        <input name="modalInput" type="text" class="form-control" size="10" ng-model="data.myNumber" placeholder="Post Title" required/><br>
        <textarea name="modalInput" class="form-control" rows="10" maxlength="1000" form="modalForm" ng-model="data.myNumber2" placeholder="Post Body" required></textarea><br>
        <label for="sel1">Select category:</label>
            <select name="modalInput" class="form-control" ng-model="data.myNumber3" id="sel1" required>
                <option value="" selected disabled>Please select</option>
                <option value='lifestyle'>lifestyle</option>
                <option value='travel'>travel</option>
                <option value='video'>video</option>
            </select><br>
        <input name="modalInput" type="url" class="form-control" size="10" ng-model="data.myNumber4" placeholder="http://www.postUrlHere.com"/>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-disabled="modalForm.$invalid" ng-class="{ 'disabled': modalForm.$invalid }" ng-click="ok()">Submit</button>
      <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
    </div>
  </form>
  </script>
  <h1>GWAT Websites and Designs</h1>
  <button class="btn" ng-click="open()">Submit new post</button>
</div>
<script>
var myMod = angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function($scope, $uibModal, $log) {
  $scope.items = ['title', 'body', 'category', 'url'];

  $scope.open = function() {
    var modalInstance = $uibModal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function() {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function(selectedItem) {
      $scope.selected = selectedItem;
    }, function() {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};

edit:

var ModalInstanceCtrl = function($scope, $uibModalInstance, data) { 
  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function() {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function() {
    $uibModalInstance.dismiss('cancel');
  };
};

myMod.controller('ModalDemoCtrl', ModalDemoCtrl);
myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);
</script>

Upvotes: 1

Views: 591

Answers (1)

codemax
codemax

Reputation: 1352

If you are looking to send the $scope.data from the current page to a modalInstance, you will have to add a property to the resolve object. 

$scope.open = function() {
  var modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    controller: ModalInstanceCtrl,
    resolve: {
      data: function() {
        return $scope.data;
      }
    }
});

From the ModalInstanceCtrl, add "data" as a dependency, and you will be able to retrieve the relevant data.

Upvotes: 1

Related Questions