Bootstrap-select下拉菜单不显示
问题描述:
我正在使用bootstrap-select来美化我的Angular下拉菜单。不幸的是,当我点击下拉菜单时,这些选项不会呈现。Bootstrap-select下拉菜单不显示
我的母版页是这样的:
<!DOCTYPE html>
<html ng-app="ibosApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>iBOS</title>
<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/Scripts/bootstrap-select.js"></script>
<script src="/angular/scripts/route-config.js"></script>
<script src="/Scripts/bootstrap-select.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/bootstrap-select.css" rel="stylesheet" />
<link href="/Content/acs.css" rel="stylesheet"/>
<script type="text/javascript">
$(function() {
$('.selectpicker').selectpicker();
});
</script>
</head>
<body>
<div class="container body-content">
<ng-view/>
</div>
</body>
</html>
和我的模板页面看起来像这样:
<div class="row">
<h3>Department</h3>
<select class="selectpicker">
<option data-content="<img src='/Content/Images/dept_cargo.png' /> CARGO">
CARGO</option>
<option data-content="<img src='/Content/Images/dept_commercial.png' /> COMMJ">
COMMJ</option>
<option data-content="<img src='/Content/Images/dept_executive.png' /> EXECJ">
EXECJ</option>
<option data-content="<img src='/Content/Images/dept_travel.png' /> TVL">
TVL</option>
</select>
</div>
出现的下拉预期,但是当我点击它降不下来它。
我错过了什么?
中号
答
因为模板动态添加,但代码$('.selectpicker').selectpicker();
只会DOM后准备执行一次。
所以你需要自己写一个directive,或使用图书馆angular-bootstrap-select
对不起,我并不清楚:我使用的角引导,选择! – serlingpa
@serlingpa如果你使用它,你需要像[this]一样导入它(https://github.com/joaoneto/angular-bootstrap-select#html-snippet)。然后你需要在你的角度模块定义中要求它:'angular.module('app',['angular-bootstrap-select'])''。 – c4605
我正在做所有这些事情,但它仍然不开心。 – serlingpa