Question

如果我在我的ui-bootstrap模态体中使用选择标记（下拉列表），那么它不会显示模态页脚按钮。如果我使用input元素而不是select标签，它工作正常。

我已经尝试了所有的东西，但无法解决这个问题。可能有些东西丢失了。

＆＃13;

 var app = angular.module('myApp', ['ngAnimate','ui.bootstrap']);

app.controller('shell', function($scope, $interval, $uibModal) {
    $scope.test = 'hello world';
    this.counter = 0;
    var vm = this;
    
    this.moveHandler = function() {
        console.log('mouse moved, reset counter!');
        vm.counter = 0;
    };
    
    var timer = function(iterCount) {
        console.log('timer tick', vm.counter);
        vm.counter++;
    };
    
    var intervalPromise = $interval(timer, 100);
    
    $scope.$on("$destroy", function handler() {
        // destruction code here
        $interval.cancel(intervalPromise); // stop interval on destroy of ctrl.
    });
    
     $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });
  };
});

// modal code from angular-ui-bootstrap demo
app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];
  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

app.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

＆＃13;

html, body {
    width: 100%;
    height: 100%;
}
/*
.modal {
display: block;
}*/

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.0/ui-bootstrap-tpls.js"></script>

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
	<div ng-controller="ModalDemoCtrl">
		<script type="text/ng-template" id="myModalContent.html">
			<div class="modal-header">
				<h3 class="modal-title">I'm a modal!</h3>
			</div>
			<div class="modal-body">
						
							<!-- <input type="text" class="form-control"/> -->
              <select class="form-control"/>
						
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary" ng-click="ok()">OK</button>
				<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
			</div>
		</script>

		<button class="btn btn-default" ng-click="open()">Open me!</button>
		<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
		<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
		<div ng-show="selected">Selection from a modal: {{ selected }}</div>

	{{test}}
	</div>

＆＃13;

enter image description here

Answer 1

您必须关闭选择标记，而不是内联关闭，您必须像这样关闭

<强>错误

<select class="form-control"/>

正确

select class="form-control" ></select>

供参考https://plnkr.co/edit/E8Ztel80jhKCaZYIqpex

并检查您的模态页脚是否显示

在ui-bootstrap模型中选择标签不会显示页脚按钮

1 个答案: