Question

我有一个实现模态的SPA。我试图为某些附有模态的元素创建下拉列表。我希望每个下拉列表都显示一个命令列表，然后是一个＆＃34;链接＆＃34;到模态。我可以很好地实现模态。问题在于下拉菜单。当我实现第一个下拉列表时页面工作正常，但是当我尝试实现第二个下拉列表时，它们都不起作用。我设置了data-target属性以查看是否有任何改变，但我要么没有正确使用它，要么它不是解决方案的一部分。有什么想法吗？

<div class="row cluster" ng-repeat="cluster in clusterCtrl.clusters">  

    <!-- this dropdown breaks the other one -->

    <div class="btn-group" dropdown is-open="status.isopen" data-target="#cluster">
        <h4 id="cluster" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
            {{cluster.name}}
        </h4>
        <ul class="dropdown-menu" role="menu">
            <li role="menuitem"><a href="#">Status</a></li>
            <li role="menuitem"><a href="#">Start</a><li>
            <li role="menuitem"><a href="#">Stop</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a class="pointer" ng-click="openCluster()">Details</a></li>
        </ul>
    </div>  

    <!-- -->

    <div class="col-lg-4">
        <!-- START INSTANCE DISPLAY -->
        <div class="row">                                   
             <div class="col-xs-1 instance" ng-repeat="instance in instanceCtrl.instances">
                 <div class="btn-group" dropdown is-open="status.isopen" data-target="#instance">
                    <h6 id="instance" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
                        {{instance.name}}
                    </h6>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
                        <li role="menuitem"><a href="#">Status</a></li>
                        <li role="menuitem"><a href="#">Start</a><li>
                        <li role="menuitem"><a href="#">Stop</a></li>
                        <li class="divider"></li>
                        <li role="menuitem"><a class="pointer" ng-click="openInstance()">Details</a></li>
                    </ul>
                 </div>
             </div>                                 
        </div>
        <!-- END INSTANCE DISPLAY -->
    </div>
</div>

Answer 1

不需要data-target属性。问题在于dropdown is-open="status.isopen"。这是一个独特的属性。要修复它，您需要为下拉列表编写一个新控制器。请确保不要将其命名为DropdownController，因为它是Bootstrap的内部控件。

<强>下拉-controller.js

(function() {

    angular
        .module('MyApp')
        .controller('DropdownCtrl', function($scope) {

            $scope.status = {
              isClusterOpen: false,
              isInstanceOpen: false,
            };

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

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

<强>的index.html

<div class="row cluster" ng-repeat="cluster in clusterCtrl.clusters">  

    <!-- Changed -->  
    <div class="btn-group" dropdown is-cluster-open="status.isClusterOpen" >
    <!-- -->

        <h4 id="cluster" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
            {{cluster.name}}
        </h4>
        <ul class="dropdown-menu" role="menu">
            <li role="menuitem"><a href="#">Status</a></li>
            <li role="menuitem"><a href="#">Start</a><li>
            <li role="menuitem"><a href="#">Stop</a></li>
            <li class="divider"></li>
            <li role="menuitem"><a class="pointer" ng-click="openCluster()">Details</a></li>
        </ul>
    </div>  

    <div class="col-lg-4">
        <!-- START INSTANCE DISPLAY -->
        <div class="row">                                   
             <div class="col-xs-1 instance" ng-repeat="instance in instanceCtrl.instances">

                 <!-- Changed -->  
                 <div class="btn-group" dropdown is-instance-open="status.isInstanceOpen">
                 <!-- -->

                    <h6 id="instance" class="pointer dropdown-toggle" dropdown-toggle ng-disabled="disabled">
                        {{instance.name}}
                    </h6>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
                        <li role="menuitem"><a href="#">Status</a></li>
                        <li role="menuitem"><a href="#">Start</a><li>
                        <li role="menuitem"><a href="#">Stop</a></li>
                        <li class="divider"></li>
                        <li role="menuitem"><a class="pointer" ng-click="openInstance()">Details</a></li>
                    </ul>
                 </div>
             </div>                                 
        </div>
        <!-- END INSTANCE DISPLAY -->
    </div>
</div>

无法添加多个Bootstrap下拉列表

1 个答案: