使用 ng-repeat 动态添加 UI Bootstrap 下拉列表

Question

我是 AngularJS 和 UI Bootstrap 的新手，我正在尝试使用 ng-repeat 动态添加下拉菜单。问题是，当单击任何一个下拉菜单时，它会触发所有下拉菜单。我猜我正在用我的代码做一些非常愚蠢的事情，如果有人能指出正确的方向让我知道如何使这段代码工作，我将不胜感激：

<div class="form-group" data-ng-repeat="item in ctrl.items">
<div class="col-sm-4">
    <input type="text" class="form-control" placeholder="" name="itemDescription" data-ng-model="item.description">
</div>
<div class="col-sm-5">
    <div class="input-group">
        <input type="tel" class="form-control" placeholder="" name="value" data-ng-model="item.value">
        <div class="input-group-btn" dropdown is-open="ctrl.isOpen">                
            <button type="button" class="btn btn-default dropdown-toggle" dropdown-toggle>Dropdown <span class="caret"></span></button>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li></li>
            </ul>
        </div>
    </div>
</div>

问题是，如果有多个下拉菜单，单击会触发所有下拉菜单，这可能真的很简单，但我很难做到。

感谢任何帮助

/问候克里斯

Answer 1

问题是 is-open="ctrl.isOpen"。您正在用 ctrl 绑定所有的开头。它应该为每个重复绑定到不同的东西，即像 is-open="item.isOpen"

使用 ng-repeat 动态添加 UI Bootstrap 下拉列表

Dynamically add UI Bootstrap dropdowns with ng-repeat

angularjs

drop-down-menu

typescript

ng-repeat

angular-ui-bootstrap