应用角度引导下拉示例 [英] Applying Angular Bootstrap Drop Down Example

问题描述

我想带下拉菜单到我的项目，我拿了code从例子。下拉显示为例子，但是当我点击它没有任何反应。

 ＆LT;窗​​体类=形式NAME =形式的novalidate＆GT;
  ＆LT; D​​IV CLASS =BTN-组下拉列表是开放=status.isopen＆GT;
    ＆LT;按钮式=按钮
            类=BTN BTN-主要下拉拨动
            下拉菜单，切换
            NG-禁用=禁用＆GT;
      按钮的下拉＆LT;跨度类=插入符号＆GT;＆LT; / SPAN＆GT;
    ＆LT; /按钮＆GT;
    ＆LT; UL类=下拉菜单中选择角色=菜单＆GT;
      ＆LT;立GT;＆LT; A HREF =＃＆GT;动作＆LT; / A＆GT;＆LT; /李＆GT;
      ＆LT;立GT;＆LT; A HREF =＃＆GT;另一个动作＆LT; / A＆GT;＆LT; /李＆GT;
      ＆LT;立GT;＆LT; A HREF =＃＆GT;别的东西此处＆lt; / A＆GT;＆LT; /李＆GT;
      ＆LT;李班=分水岭＆GT;＆LT; /李＆GT;
      ＆LT;立GT;＆LT; A HREF =＃＆GT;分离链接＆LT; / A＆GT;＆LT; /李＆GT;
    ＆LT; / UL＆GT;
  ＆LT; / DIV＆GT;
  ＆LT; D​​IV＆GT;
＆LT; /表及GT;
 

现在的控制器，这个网站：

  angular.module（'startupApp'）。控制器（'DropdownCtrl'，函数（$范围，$日志）{
    $ scope.items = [
        第一选择！，
        和你另一种选择。，
        '可是等等！三分之一！'
    ];    $ scope.status = {
        ISOPEN：假的
    };    $ scope.toggled =功能（开）{
        $ log.log（'下拉现在是：'，打开）;
    };    $ scope.toggleDropdown =功能（$事件）{
        。$事件preventDefault（）;
        $ event.stopPropagation（）;
        $ scope.status.isopen = $ scope.status.isopen！;
    };
}）;
 

解决方案

多的奋斗之后我就发现，我的情况下工作的答案。我只需要解析角添加到我的angular.module（'MyApp的'['解析角​​']）。

I want to bring drop downs into my project and I took the code from the example. The drop down appears as in the example but when I click it nothing happens.

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

Now the controller for this html:

angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {
    $scope.items = [
        'The first choice!',
        'And another choice for you.',
        'but wait! A third!'
    ];

    $scope.status = {
        isopen: false
    };

    $scope.toggled = function(open) {
        $log.log('Dropdown is now: ', open);
    };

    $scope.toggleDropdown = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.status.isopen = !$scope.status.isopen;
    };
});

解决方案

After much struggle I just found the answer that worked for my case. I only needed to add parse-angular to my angular.module('myapp'['parse-angular']).

这篇关于应用角度引导下拉示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！