CODEWITHSUNDEEP
angularjsdrop-down-menutypescriptangular-ui-bootstrapangularjs-ng-repeat
Kristofer
Kristofer

Reputation: 175

Dynamically add UI Bootstrap dropdowns with ng-repeat

I'm new to using AngularJS and UI Bootstrap and I'm trying to add dropdowns dynamically using ng-repeat. The problem is that when any one dropdown is clicked it triggers all of them. I'm guessing I'm doing something really stupid with my code and I would appreciate it if someone could point me in the right direction on how to make this code work:

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

The problem is that with more than one dropdown, a click results in all dropdowns being triggered and its probably something really easy but I'm having a hard time with it.

Appreciate any help

/Regards Kris

Upvotes: 0

Views: 1674

Answers (1)

basarat
basarat

Reputation: 276085

The issue is is-open="ctrl.isOpen". You are binding the opening of all of them with ctrl. It should be bound to something distinct for each repeat, i.e. something like is-open="item.isOpen"

Upvotes: 1

Related Questions