[英]Bootstrap dropdown disappears after clicking it
<div class="container" ng-controller="serviceHistoryController">
<!-- Search box Start -->
<div class="dropdown col-xs-8">
<button class="btn btn-default col-xs-4" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="false" aria-expanded="true">
Select SUT
<span class="caret"></span>
</button>
<ul class="dropdown-menu col-xs-8" aria-labelledby="dropdownMenu1">
<li ng-repeat="sutname in sutlist">
<a href="#" ng-click="sutselected(sutname)">
{{sutname.name}}
</a>
</li>
</ul>
</div>
</div>
上面是我正在使用的bootstrap +角度下拉代码。 但是一旦我点击了下拉菜单,它就会消失。 我正在使用angular1 + boostrap 3.3.7和jquery 1.12.4库。 不使用其他脚本或js。
以下是角度函数
app.controller("serviceHistoryController",function($scope){
let menuitems = [{"sutid":"1","name":"AA"},
{"sutid":"2","name":"BB"},
{"sutid":"3","name":"CC"},
{"sutid":"4","name":"DD"},
{"sutid":"4","name":"EE"}]
$scope.sutlist = menuitems;
$scope.selectedSUT;
$scope.sutselected = function(sutname){
$scope.selectedSUT = sutname;
alert("dropdown sut selected:"+$scope.selectedSUT.name);
}
});
问题是与您的数据类型,让使用VAR看到修改后的控制器。
app.controller("serviceHistoryController",function($scope){
var menuitems = [{"sutid":"1","name":"AA"},
{"sutid":"2","name":"BB"},
{"sutid":"3","name":"CC"},
{"sutid":"4","name":"DD"},
{"sutid":"4","name":"EE"}]
$scope.sutlist = menuitems;
$scope.selectedSUT;
$scope.sutselected = function(sutname){
$scope.selectedSUT = sutname;
alert("dropdown sut selected:"+$scope.selectedSUT.name);
}
});
请参见
var app = angular.module('main', []); app.controller("serviceHistoryController",function($scope){ var menuitems = [{"sutid":"1","name":"AA"}, {"sutid":"2","name":"BB"}, {"sutid":"3","name":"CC"}, {"sutid":"4","name":"DD"}, {"sutid":"4","name":"EE"}] $scope.sutlist = menuitems; $scope.selectedSUT; $scope.sutselected = function(sutname){ $scope.selectedSUT = sutname; alert("dropdown sut selected:"+$scope.selectedSUT.name); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="main" class="container" ng-controller="serviceHistoryController"> Normal : <select> <option>select</option> <option ng-repeat="sutname in sutlist"> {{sutname.name}}</option> </select> <br/> <br/> <!-- Search box Start --> <div class="dropdown col-xs-8"> Bootstrap <button class="btn btn-default col-xs-4" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="flase" aria-expanded="true"> Click Here <span class="caret"></span> </button> <ul class="dropdown-menu col-xs-8" aria-labelledby="dropdownMenu1"> <li ng-repeat="sutname in sutlist"> <a href="#" ng-click="sutselected(sutname)"> {{sutname.name}} </a> </li> </ul> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.