0

My situation is slightly different than passing normal data from modal to main controller. my input field in modal contains an autocomplete box.

I have the following plunker attached herewith

http://plnkr.co/edit/lpcg6pPSbspjkjmpaX1q?p=preview

$scope.ok = function() {
          $modalInstance.close();
};

Once user clicks on 'Add User', a modal opens. We start entering name in the first input field. if we type letter 'a', autocomplete feature shows the options. We select Angular and select 'Scope' and 'Watch' from other 2 dropdown input values.

Now, we press 'ok'. Can someone tell me how to pass the above selected values in the modal to the controller.

Patrick
  • 3,938
  • 6
  • 20
  • 32
  • Take a look: http://plnkr.co/edit/xyOSVrxLnAtSpjZ8kdlm?p=preview from this answer: http://stackoverflow.com/questions/26570653/how-to-pass-form-data-from-angular-ui-bootstrap-modal-to-view – developer033 Jul 06 '16 at 23:58
  • @developer033- mine is a slightly different issue. I have autocomplete input box inside a modal. i am not finding a way to pass that from modal to controller. Select Name input box is autocomplete. – Patrick Jul 07 '16 at 00:17
  • @developer033- can you show me how to get the autocomplete input fields value. i.e. select name. i couldnot find it in a plunker for this type of input – Patrick Jul 07 '16 at 00:36
  • I tried finding typeaheads inside a modal. but couldnot find any working solution. – Patrick Jul 07 '16 at 00:43

1 Answers1

1

You can use AngularStrap modals, which I personally prefer because the data manipulation is easier, in my opinion.

Here's code:

JS:

angular.module('app', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])

.config(function($modalProvider) {
  angular.extend($modalProvider.defaults, {
    html: true
  });
})

.controller('mainCtrl', function($scope, $rootScope, $modal) {
  $scope.selectedState = '';
  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

  $scope.modal = {
    title: "<strong>Example</strong>",
    html: true,
    show: true
  };

  $scope.get_change = function(value) {
      $scope.selectedState = value;
  }
});

HTML:

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-sanitize.min.js" data-semver="1.5.7"></script>
  <script src="https://mgcrea.github.io/angular-strap/dist/angular-strap.js"></script>
  <script src="https://mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  <link rel="stylesheet" href="https://mgcrea.github.io/angular-strap/styles/libs.min.css">
  <link rel="stylesheet" href="https://mgcrea.github.io/angular-strap/styles/docs.min.css">
</head>

<body ng-controller="mainCtrl">
  <div class="col-md-6">
    <button type="button" class="btn btn-md btn-primary" data-animation="am-flip-x" data-template-url="modal/docs/modal.demo.tpl.html" data-placement="center" bs-modal="modal">Open modal
    </button>
    <hr>
    <span ng-bind="selectedState"></span>
  </div>
</body>

</html>

<!-- Modal content

<div class="modal ng-scope center am-fade-and-scale" tabindex="-1" role="dialog" aria-hidden="true" style="z-index: 1050; display: block;">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" ng-show="title">
        <button type="button" class="close" aria-label="Close" ng-click="$hide()"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" ng-bind-html="title"></h4></div>
      <div class="modal-body">
        <div class="form-group">
          <label><i class="fa fa-globe"></i> State</label>
          <input type="text" class="form-control" ng-model="selectedState" bs-options="state for state in states" placeholder="Enter state" ng-change="get_change(selectedState)" bs-typeahead>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
      </div>
    </div>
  </div>
</div>

-->

You can check the complete code in plnkr.

For more info about typeaheads in AngularStrap check here.

developer033
  • 24,267
  • 8
  • 82
  • 108
  • @developer033- http://plnkr.co/edit/Vc7v55be6jnUTumVJZXR?p=preview Can you check this plunker please. I have one small doubt. I have added one more input box inside modal. Can you tell me how to get this value too from the modal to controller ? – Patrick Jul 07 '16 at 13:52
  • I forked your plnkr here: http://plnkr.co/edit/2RiVwNmdauwrbCD7dkPe?p=preview. By the way, why did you **uncheck** my answer as correct??? – developer033 Jul 07 '16 at 15:38
  • Thanks. i will have a look at the plunker. I thought i had marked it as an accepted answer. Will check it again. Bte, this is the easiest way to merge autocomplete feature in a modal. thanks for all the inputs so far. – Patrick Jul 07 '16 at 15:40
  • @developer033- i have one more twist here. http://plnkr.co/edit/YeEY512UxEO58gWfKOtK?p=preview Once user clicks modal, enters value and presses 'add', there are 2 functions which needs to be performed. 1st is close the modal and second is running another function. I am not able to run the other function. Can you please have a look. ng-click="$hide() run()". run() is the other function which i am trying to execute – Patrick Jul 07 '16 at 16:56
  • Just insert a semicolon (*;*) between the two methods, like: `ng-click="$hide();run()"`. – developer033 Jul 07 '16 at 17:04
  • tried that. didnt give me console output when run command executes. not sure if run function executed either – Patrick Jul 07 '16 at 17:06
  • strange. can you show it in a plunker. i tried but its not giving me any output at the console. – Patrick Jul 07 '16 at 17:14
  • $scope.run = function(){ console.log(selectedState); }; Theres a run function in my plunker. I am not able to get this value in console log – Patrick Jul 07 '16 at 17:16
  • http://plnkr.co/edit/UixYzE2B7KbmxIjM7opr?p=preview Jus in case anyone wants to refer to the last working plunker. – Patrick Jul 07 '16 at 20:28