Legion Legion - 2 days ago 6
AngularJS Question

ng-repeat only populates last entry in array when used with uib-dropdown

I'm trying to populate a drop down menu using UI Bootstrap's uib-dropdown and ng-repeat but only the last record in the array is being populated.

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">
<li><a href="{{ resource.ResourceLink }}" target="_blank">{{ resource.ResourceText }}</a></li>
</ul>
</li>
</ul>
</div>


I've confirmed that
TN.resourceList
has 3 records.

If I remove:
class="dropdown-menu"


from:
<ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">


then all the records display but it no longer renders as a drop down menu.

I also tried adding the
uib-dropdown-menu
directive to the
<ul>
with the
ng-repeat
on it as well as the
role
attributes as suggested in this answer: Bootstrap Dropdownlist Issue in angular JS

But it had no effect.

Answer

       <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
                <a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li ng-repeat="resource in TN.resourceList"><a href="{{ resource.ResourceLink }}" target="_blank">{{ resource.ResourceText }}</a></li>
                </ul>
            </li>
        </ul>
    </div>

Notice the ng-repeat on the li instead of the ul dom element (ng-repeat repeats elements where it added to and it's childeren).

Comments