Angular bootstrap collapse box if screen is small

Question

Hit a brick wall here.

I have an angular 1.5 app using ui-bootstrap.

I have a panel that I need to be collapsable on mobile, but not on desktop.

https://angular-ui.github.io/bootstrap/#/collapse

<div ng-controller="CollapseDemoCtrl">
    <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
    <hr>
    <div uib-collapse="isCollapsed">
        <div class="well well-lg">Some content</div>
    </div>
</div>

From their documentation, the above will toggle collapse the div based on the variable "isCollapsed".

This is great, but is there a way to set the "isCollapsed" true automatically when the window is below a specific size?

Answer 1

You could try something like isCollapsed="window.innerWidth<500". This should evaluate to true if the window width is less than 500px.