twitter-bootstrap-3 – 使用AngularJS UI Bootstrap时,Bootstra

发布时间：2020-12-17 21:24:19 所属栏目：安全来源：网络整理

导读：我在 angularjs项目中使用bootstrap 3下拉切换菜单,一切似乎工作正常,但在使用angular ui bootstrap(angular-ui-bootstrap.min.js)后,bootstrap 3下拉切换菜单无效(意味着它不能打开) ).有没有人有同样的问题？请帮我解决这个问题. 的index.html ul class="n

我在 angularjs项目中使用bootstrap 3下拉切换菜单,一切似乎工作正常,但在使用angular ui bootstrap(angular-ui-bootstrap.min.js)后,bootstrap 3下拉切换菜单无效(意味着它不能打开) ).有没有人有同样的问题？请帮我解决这个问题.

的index.html

<ul class="nav nav-list">
                <li>
                    <a href="index.html">
                        <i class="icon-dashboard"></i>
                        <span class="menu-text"> Dashboard </span>
                    </a>
                </li>

                <li>
                    <a href="#" class="dropdown-toggle">
                        <i class="icon-building"></i>
                        <span class="menu-text"> Projects </span>

                        <b class="arrow icon-angle-down"></b>
                    </a>

                    <ul class="submenu">
                        <li>
                            <a href="#">
                                <i class="icon-double-angle-right"></i>
                                Find Project
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-double-angle-right"></i>
                                Create Project
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-double-angle-right"></i>
                                Update Project
                            </a>
                        </li>    

                    </ul>
                </li>
<ul>

解决方法

你需要以Angularjs的方式做到这一点：

确保包括：

指数：

<ul class="nav nav-list">
    <li>
      <a href="index.html">
        <i class="icon-dashboard"></i>
        <span class="menu-text"> Dashboard </span>
      </a>
    </li>
    <li class="dropdown" ng-controller="DropdownCtrl">
      <a class="dropdown-toggle">
        <i class="icon-building"></i>
        <span class="menu-text"> Projects </span>
        <b class="arrow icon-angle-down"></b>
      </a>
        <ul class="dropdown-menu">
          <li ng-repeat="choice in items">
            <i class="icon-double-angle-right"></i>
            <a>{{choice}}</a>
          </li>
        </ul>
    </li>
<ul>

JS：

angular.module('plunker',['ui.bootstrap']);
function DropdownCtrl($scope) {
  $scope.items = [
    "Find Project","Create Project","Update Project"
  ];
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!