Currently, I am working on developing an app using Angular.js and Bootstrap UI, but I have run into a problem with a collapse navigation feature.
The issue I am facing is that I have an ng-repeat that should be functioning properly. However, when I click on the nav-bar, it appears to collapse but does not display any elements inside. Below is my HTML markup:
<a href="#" ng-controller="CollapseCtrl">
<ul class="list-unstyled">
<li class="nav-header">
<a href="#" ng-click="isCollapsed = !isCollapsed" ><h5>Settings
<i class="glyphicon glyphicon-chevron-right"></i></h5>
</a>
<ul class="list-unstyled collapse in" collapse="isCollapsed">
<li ng-repeat="element in first"><a href="#"><i class='{{element.icon}}'></i>{{element.title}}</a></li>
</ul>
</li>
......Some other nav-header with other lists
</ul>
</a>
Here is my script:
var myAppModule = angular.module('myApp', ['ui.bootstrap']);
myAppModule.controller('CollapseCtrl', function($scope) {
$scope.first = [
{title : 'Home', icon : 'glyphicon glyphicon-home' },
{title : 'Messages', icon : 'glyphicon glyphicon-envelope' },
{title : 'Options', icon : 'glyphicon glyphicon-cog' },
{title : 'Shoutbox', icon : 'glyphicon glyphicon-comment' },
{title : 'Staff List', icon : 'glyphicon glyphicon-user' },
{title : 'Transactions', icon : 'glyphicon glyphicon-flag' },
{title : 'Rules', icon : 'glyphicon glyphicon-exclamation-sign' },
{title : 'Logout', icon : 'glyphicon glyphicon-off' }
];
$scope.isCollapsed = false;
});
I attempted to troubleshoot using Fiddle, and it seems that the issue is not related to the ng-repeat implementation.
I'm struggling to identify where I went wrong, so any assistance would be greatly appreciated. It's likely just a simple mistake somewhere...
Thank you!