应用 Angular Bootstrap 下拉示例 [英] Applying Angular Bootstrap Drop Down Example

问题描述

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

<div class="btn-group" dropdown is-open="status.isopen"><按钮类型=按钮"class="btn btn-primary dropdown-toggle"下拉切换ng-禁用=禁用">按钮下拉<span class="caret"></span><ul class="dropdown-menu" role="menu"><li><a href="#">动作</a></li><li><a href="#">另一个动作</a></li><li><a href="#">这里还有别的东西</a></li><li class="divider"></li><li><a href="#">分隔链接</a></li>

<div></表单>

现在这个 html 的控制器:

angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {$scope.items = ['第一选择！','和你的另一个选择.','可是等等！三分之一！'];$scope.status = {isopen: 假};$scope.toggled = 函数(打开){$log.log('Dropdown 现在是:', open);};$scope.toggleDropdown = 函数($event){$event.preventDefault();$event.stopPropagation();$scope.status.isopen = !$scope.status.isopen;};});

解决方案

经过一番努力，我终于找到了适合我的案例的答案.我只需要将 parse-angular 添加到我的 angular.module('myapp'['parse-angular']) 中.

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']).

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