Question

我正在使用bootstrap-select来美化我的Angular下拉列表。不幸的是，当我点击下拉列表时，选项不会呈现。

我的母版页看起来像这样：

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

下拉列表按预期显示，但点击它时它不会下降。

我错过了什么？

中号

Answer 1

因为模板是动态添加的，但代码$('.selectpicker').selectpicker();只会在dom准备就绪后执行一次。

所以你需要自己写一个directive，或者使用库angular-bootstrap-select

Bootstrap-select下拉列表未显示

1 个答案: