AngularJS如何保持下拉列表中的选择打开答案

【问题标题】：AngularJS How do I keep a select which is inside a dropdown openAngularJS如何保持下拉列表中的选择打开
【发布时间】：2018-11-26 09:28:06
【问题描述】：

我有这个引导代码的平静，它是一个下拉列表，在下拉列表中我有两个选择，它们是由一个数组生成的，该数组是模型 range_price 我如何保持选择显示一次单击？

谢谢。

<div class="button-group col-md-1">
  <button type="button" class="btn btn-default btn-sm dropdown-toggle"
          data-toggle="dropdown">
      <span class="glyphicon glyphicon-cog"></span> <span class="caret">
      </span>
  </button>
  <ul class="dropdown-menu">
    <li>
        <label>Min-Price</label>
        <select ng-model="range_price" ng-options="range as range for range in range_price"></select>
    </li>
    <li>
        <label>Max-Price</label>
        <select ng-model="range_price" ng-options="range as range for range in range_price"></select>
    </li>
  </ul>
</div>

【问题讨论】：

标签： html angularjs twitter-bootstrap

【解决方案1】：

希望这有帮助，将此指令“dropdown-with-select”添加到“ul”标签

<!DOCTYPE html>
<html>
<title>Demo App</title>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>	
</head>
<body ng-app="demo">
<div class="container" ng-controller="demoController">
	<div class="row">
		<div class="col-lg-12">
			<div class="button-group col-md-1">
			  <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span>
			  <span class="caret"></span></button>
			  <ul class="dropdown-menu" dropdown-with-select>
				<li>
					<label>Min-Price</label>
					<select ng-model="min_price" ng-options="range as range for range in range_price">
						<option value="">- Select Price -</option>
					</select>
				</li>
				<li>
					<label>Max-Price</label>
					<select ng-model="max_price" ng-options="range as range for range in range_price">
						<option value="">- Select Price -</option>
					</select>
				</li>
			  </ul>
		  </div>
	  </div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<h3>Selected Min Price : {{min_price}}</h3>
			<h3>Selected Max Price : {{max_price}}</h3>
		</div>
	</div>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.0/angular.min.js"></script>
<script>
angular.module('demo',[])
  .controller('demoController',['$scope',function($scope){
	$scope.min_price=null;
	$scope.max_price=null;
	$scope.range_price=[100,200,300,400];
  }])
  .directive('dropdownWithSelect',[function(){
	return {
		restrict:"A",
		link:function(scope,element,attrs){
			angular.element(element).click(function(event){
				event.stopPropagation();
			});
		}		
	}
  }]);
</script>	
</body>
</html>

【讨论】：

感谢您的帮助！