I'm currently trying to build an app with angular.js and bootstrap ui and I'm stacked with a collapse navigation.
The problem is that I have a ng-repeat that should work but when I click the nav-bar it looks like it collapses but doesn't show any element inside. This 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>
And this 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 tried with fiddle to build the list and I saw that It's not a problem of the way the ng-repeat it's done.
I really don't see my mistake so I hope you can help me, It must be a silly mistake...
Thanks
For some reason, it does not seem to like having to controller attached to an anchor
Changing the <a href="#" ng-controller="CollapseCtrl">
to <div style="cursor: pointer;" ng-controller="CollapseCtrl">
seems to do the trick. So would putting the div right around the anchor, if you need the href="#" for something other than the pointer appearance.
See the plunkr: http://plnkr.co/edit/6dLaOacDhHnc6038Y5MN?p=preview