How to get selected option in be selected in a dropdown after opening a modal in AngularJS?

Question

I have a select tag like this:

<select... ng-model="someProperty" ng-change="openSomeDialog()">
   <option value=""></option>
   <option value="Test1">Test1</option>
   <option value="Test2">Test2</option>
</select>

The openSomeDialog() function opens a ui.bootstrap.modal directive modal. When the user closes the modal, the dropdown reverts to the initial option which is the empty one (first option) instead of what the user has selected. I also tried to use a watch on the select's ngModel and I get the same issue.
If I put some non modal related logic in the function instead of opening a modal, the selection works fine so it seems the process of opening the modal changes the events workflow or something.

How do I get the dropdown to select what the user has selected before the modal opened, after the modal closes?

There's too much code in the real app to post here. Basically the function calls the open method of the bootstrap modal service. I will see if I can create a Plunkr example. — Tony_Henrich, Apr 17 '18 at 03:53
I'm sure the scenario in the app is different than what you've posted... but are you looping through the select values "Test1", "Test2", etc in some other way? Or are they hard-coded? — Tcraw, Apr 17 '18 at 06:41

Tcraw · Answer 1 · 2018-04-17T06:50:55.067

Ng-Options

Try using ng-options:

// Script
$scope.datarray = ["test1, "test2"];

<!-- HTML -->
<select class="form-control" ng-options="test in dataArray" ng-model="someProperty" ng-change="openSomeDialog()">
     <option value=""></option>
</select>

https://embed.plnkr.co/wF3gc5/

EDIT: Updated my answer to better align with your requirements / comment.

Reference

https://docs.angularjs.org/api/ng/directive/select

Snippet

(function() {

  "use strict";

  var app = angular.module('plunker', ['ui.bootstrap']);

  app
    .controller("MainCtrl", MainCtrl)
    .controller("ModalController", ModalController);

  MainCtrl.$inject = ["$scope", "$log", "$uibModal"];

  function MainCtrl($scope, $log, $uibModal) {

    // Sample Data
    $scope.cats = [{
      id: 0,
      name: "mister whiskers"
    }, {
      id: 1,
      name: "fluffers"
    }, {
      id: 2,
      name: "captain longtail"
    }];

    $scope.openModal = function() {

      // Open the modal with configurations
      var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html', // Points to my script template
        controller: 'ModalController', // Points to my controller
        controllerAs: 'mc',
        windowClass: 'app-modal-window',
        resolve: {
          cats: function() {
            // Pass the Cats array to the Modal
            return $scope.cats;
          },
          selectedCat: function() {
            // Pass the selected cat to the Modal
            return $scope.selectedCat;
          }
        }
      });

      // Handle the value passed back from the Modal
      modalInstance.result.then(function(returnedCat) {
        if (returnedCat === null || returnedCat === undefined) {
          // Do Nothing
          return;
        }

        // We can now update our main model with the modal's output
        $scope.selectedCat = returnedCat;
      });
    }
  }

  ModalController.$inject = ['$scope', '$timeout', '$uibModalInstance', 'cats', 'selectedCat'];

  function ModalController($scope, $timeout, $uibModalInstance, cats, selectedCat) {

    // Assign Cats to a Modal Controller variable
    console.log("cats: ", cats)

    $scope.modalCats = cats;

    if (selectedCat !== null || selectedCat !== undefined) {
      $scope.selectedModalCat = selectedCat;
    }

    $scope.submit = function() {
      // Pass back modified resort if edit update successful
      $uibModalInstance.close($scope.selectedModalCat);
    }

    $scope.close = function() {
      // Pass back modified resort if edit update successful
      $uibModalInstance.close(null);
    }
  }

})();

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

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>

  <link rel="stylesheet" href="style.css" />
  <link data-require="bootstrap-css@3.*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />

  <!-- JQuery and Bootstrap -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Angular Stuff -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-touch.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular-animate.js"></script>

  <!-- UI Bootstrap Stuff -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

  <!-- OUR Stuff -->
  <script src="app.js"></script>
  <script src="modalController.js"></script>
</head>

<body ng-controller="MainCtrl">
  <!-- ==== MAIN APP HTML ==== -->
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <div class="jumbotron text-center">
          <h3>AngularJS - ngOptions and UI Bootstrap Modal</h3>
        </div>
      </div>
      <div class="col-xs-12">
        <form class="form">
          <div class="form-group">
            <label class="form-label">Select Profile:</label>
            <select class="form-control" ng-options="cat.name for cat in cats track by cat.id" ng-model="selectedCat" ng-change="openModal()">
              <option value="">-- Cat Selection --</option>
            </select>
          </div>
          <div class="well form-group" ng-show="selectedCat !== undefined && selectedCat !== null">
            <label>Selected: </label>
            <pre>{{ selectedCat }}</pre>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3 class="modal-title" id="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body" id="modal-body">
      <select class="form-control" ng-options="modalCat.name for modalCat in modalCats track by modalCat.id" ng-model="selectedModalCat">
        <option value="">-- Cat Selection --</option>
      </select>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" ng-click="submit()">OK</button>
      <button class="btn btn-warning" type="button" ng-click="close()">Cancel</button>
    </div>
  </script>
</body>

</html>

I am not sure what problem you're solving. My modal opens as soon as the user changes the selection. In your example, you have a separate button to open the modal. I don't have issues passing things between to and from the modal. My issue is the dropdown reverts to the initial selection. I can save the user's selection in a property before opening the modal but the select is already bound to a property. I don't have to go through passing it to the modal and returning it. — Tony_Henrich, Apr 17 '18 at 06:12
My mistake: the question read as if there was an issue returning data from the modal. Take a look at my updated plunker -- changed to your specs of popping the modal on change: the select does not revert to the null value. https://embed.plnkr.co/wF3gc5/ — Tcraw, Apr 17 '18 at 06:25

score 0 · Answer 2 · answered Apr 17 '18 at 06:05

I think this might be useful-> https://stackoverflow.com/a/1033982/7192927 Try binding the "selected" attribute to an object/variable as required to your case.

If you are using AngularJS, Instead of using select, you can use md-select of angular material, where u have the trackby attribute to make the option appear as selected.--> https://material.angularjs.org/latest/api/directive/mdSelect

score 0 · Accepted Answer · answered Apr 17 '18 at 17:49

0

Actually I have found the issue in 'my' code. After closing the modal, it was retrieving data that caused the property bound to the select to refresh as well.

answered Apr 17 '18 at 17:49

Tony_Henrich

42,411
75
239
374

score -1 · Answer 4 · answered Apr 17 '18 at 04:47

-1

Angular Bootstrap modal Doesn't save the state when the it's closed. You must perform some alternative code to save the user state when they closed the browser or store it in cookie. After that when the user open again the modal you must fetch it and display it in your

<select....... ng-change="openSomeDialog()">...</select>

answered Apr 17 '18 at 04:47

Vincent Llauderes

83
1
9

The user is closing the modal, not the browser. The page with the dropdown is still open. – Tony_Henrich Apr 17 '18 at 06:22

How to get selected option in be selected in a dropdown after opening a modal in AngularJS?

4 Answers4

Ng-Options

Reference

Snippet