Jorge Rodríguez Jorge Rodríguez - 4 years ago 216
AngularJS Question

Bootstrap ui Collapse is open as default

I'm having a problem with bootstrap ui collapsed directive, It show open as default and I needed collapsed on page load, I'm setting the variables correctly but still doesn't work correctly

here's part of my code:

aside class="col-md-3 leftSidebar separator-right" ng-controller="Collapse as vm">
<div class="row separator">
<div class="sidebarPosition">
<div class="leftSidebar__toggle">
<a class="mod" ng-click="vm.isCollapsedLeft = !vm.isCollapsedLeft"><span class="fa fa-bars"></span> Outline</a>

<ul uib-collapse="vm.isCollapsedLeft">
<li><a href="#scientific_abstract" du-smooth-scroll>Scientific Abstract</a></li>
<li><a href="#layperson_abstract" du-smooth-scroll>Layperson’s Abstract</a></li>
<li><a href="#introduction" du-smooth-scroll>Introduction</a></li>
<li><a href="#">Results</a></li>
<li><a href="#">Discussion</a></li>
<li><a href="#">Methods</a></li>
<li><a href="#">Additional Information</a></li>
<li><a href="#">Change History</a></li>
<li><a href="#">Acknowledgements</a></li>
<li><a href="#">Author Information</a></li>
<li><a href="#">Author Contributions</a></li>
<div class="row leftSidebar__sections">
<li><a ui-sref="article.figures"><span class="fa fa-picture-o"></span> Figures</a></li>
<li><a ui-sref="article.references"><span class="fa fa-link"></span> References</a></li>
<li><a href="#"><span class="fa fa-retweet"></span> Related</a></li>
<a href="#"> <span class="fa fa-area-chart"></span> Stats Impact</a>
<li><a ui-sref="article.comments"><span class="fa fa-comment"></span> Comments</a></li>

my Controller:

(function () {
'use strict';

.controller('Collapse', Collapse);

function Collapse() {

var vm = this;

vm.isCollapsedLeft = false;
vm.isCollapsedRight = false;



and here's a plunkr:

Thanks for the help.

Lex Lex
Answer Source

You said you want it to be collapsed on page load, but you are setting vm.isCollapsedLeft = false;. Set vm.isCollapsedLeft = true; and it will be collapsed on page load.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download