Question

我有一个像这样的选择标签：

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

openSomeDialog（）函数打开一个ui.bootstrap.modal指令模式。当用户关闭模态时，下拉列表将恢复为初始选项，即空的选项（第一个选项），而不是用户选择的选项。我也尝试在select的ngModel上使用手表，我也遇到同样的问题如果我在函数中放置一些非模态相关逻辑而不是打开模态，则选择工作正常，因此打开模态的过程似乎会更改事件工作流程等。

在模态关闭后，如何在模式打开之前选择用户选择的内容？

Answer 1

伍-选项

尝试使用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/

编辑：更新了我的答案，以便更好地符合您的要求/评论。

参考

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

段

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

Answer 2

我认为这可能有用 - ＆gt; https://stackoverflow.com/a/1033982/7192927 尝试根据您的案例需要将“selected”属性绑定到对象/变量。

如果你使用的是AngularJS，你可以使用md-select of angular material，而不是使用select，你可以使用trackby属性来显示选项选中.--＆gt; https://material.angularjs.org/latest/api/directive/mdSelect

Answer 3

其实我在“我的”中发现了这个问题。码。关闭模态后，它检索的数据导致绑定到select的属性也刷新。

Answer 4

Angular Bootstrap模式当它关闭时不保存状态。您必须执行一些替代代码以在用户关闭浏览器或将其存储在cookie中时保存用户状态。之后，当用户再次打开模态时，您必须获取它并将其显示在

中

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

如何在AngularJS中打开模态后在下拉列表中选择选定的选项？

4 个答案:

伍-选项

参考

段