Angularjs 应用角度引导下拉示例

我想在我的项目中引入下拉列表，并从示例中获取代码。下拉列表如示例中所示，但单击它时，什么也没有发生

<form class="form" name="form"  novalidate>
  <div class="btn-group" dropdown is-open="status.isopen">
    <button type="button"
            class="btn btn-primary dropdown-toggle"
            dropdown-toggle
            ng-disabled="disabled">
      Button dropdown <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div>
  <div>
</form>   

---

您的代码中存在一些问题：

您的HTML无效，最后一个

标记不应该在那里

<form class="form" name="form" novalidate>
    <div class="btn-group" dropdown is-open="status.isopen">
        <button type="button"
                class="btn btn-primary dropdown-toggle"
                dropdown-toggle
                ng-disabled="disabled">
            Button dropdown <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li>
                <a href="#">Action</a>
            </li>
            <li>
                <a href="#">Another action</a>
            </li>
            <li>
                <a href="#">Something else here</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="#">Separated link</a>
            </li>
        </ul>
    </div>
</form>

您是否包含了正确的文件

• 安格拉斯
• 角度用户界面引导
• 引导CSS

控制器中不需要任何特殊功能，

下拉开关

和

下拉开关

指令是自给自足的

---

我遇到了同样的问题，我通过删除行下拉开关解决了这个问题

我不知道问题出在哪里，但这样做效果很好

以下是我所做的： 这是原始示例：

    <!-- Single button -->
    <div class="btn-group" dropdown is-open="status.isopen">
      <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
        Button dropdown <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

按钮下拉列表

这是没有下拉切换的代码

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

按钮下拉列表

编辑：

如果您使用的是angular ui引导版本：0.10.0

<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
  <button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
    Button dropdown <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

现在，我已经使用以下命令更改了ui引导

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

---

现在一切都很有魅力

经过一番努力，我才找到了适合我情况的答案。我只需要将parse angular添加到我的angular.module（'myapp'['parse-angular']）。

首先我想感谢Jorge Casariego。他的回答帮助我走得更远

但是最后有一个问题，即当有人与下拉菜单（）交互时调用的

$scope.toggled=function（open）{…}

和

$scope.toggleDropdown=function（$event）{…}

。查看代码后，我不得不进一步调整html代码：

• 属性

  下拉列表

  应该是类值，而不是属性本身

• 是开放的=…

  是不需要的，ui引导将处理它

---

• 将

  ng单击

  附加到

  ，但为了记录，我将其放在这里。它可以工作。
  您使用的是哪个引导/AngularJS集成库？我使用的是Angular Fullstack。在客户端中有一个bower_components文件夹，其中包含一个angular bootsrap文件夹，其中包含一个ui-bootstrap.js文件，听起来与演示代码中的文件类似。这里有一个例子：是的，有什么问题？我是说那是正确的图书馆对吧？没问题。相应地添加了相关的标签。那么为什么下拉菜单不起作用呢？我修复了html错误，但没有任何更改。我使用的Angular Fullstack将ui.bootstrap作为依赖项，正如上面所示，就在我的应用程序文件中。我不知道你说的包括“正确的文件”是什么意思。当我使用Yeoman/Bower设置seed时，我选择bootstrap和ui bootstrap作为依赖项。正因为如此，我有文件夹的角度，角度引导，引导，引导sass官方。那么，试着在JSFIDLE中复制它，否则我将无法提供更多帮助。谢谢。这对我来说同样适用于0.10.0版。对我来说，解决方案正好相反：我需要确保按钮具有
  下拉切换
  属性，以及父
  div
  下拉

  属性，否则按钮没有任何效果。如果您使用的是version，您必须使用

  uib下拉列表

  和

  uib下拉列表切换

  作为属性。

  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
  

  <!-- Single button -->
  <div class="btn-group" dropdown is-open="status.isopen">
    <button type="button" class="btn btn-primary dropdown-toggle"
     ng-disabled="disabled">
      Choose category <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li ng-repeat="category in interactions">
        <a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
         {{category.displayName}}
        </a>
      </li>
    </ul>
  </div>
  

  <!-- Single button -->
  <div class="btn-group dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle"
     ng-disabled="disabled">
      Choose category <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li ng-repeat="category in interactions">
        <a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
         {{category.displayName}}
        </a>
      </li>
    </ul>
  </div>
  

  $scope.toggleDropdown = function($event) {
    $event.preventDefault();
    console.log('This is your event now: ', $event);
  };