CODEWITHSUNDEEP
javascriptjqueryangularjsautocompletemodal-dialog
Patrick
Patrick

Reputation: 4298

Pass data from modal to main controller- (Plunker attached)----contains autocomplete input box inside a modal

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.

Upvotes: 0

Views: 649

Answers (1)

developer033
developer033

Reputation: 24874

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.

Upvotes: 1

Related Questions