Apple Pie Apple Pie - 3 months ago 11
AngularJS Question

Angularjs hide and show according to screen size responsive

Hi every one I am trying to achieve this

enter image description here

When the user is on desktop, he should see the block when he visits the page, and the user should see the button when he is on mobile and then he should be able to toggle it.

I am able to show the button using CSS media query by setting
display: none when screen size is <480px and also able to revert the
display: none to block by adding ng-click="showBlocks={'display': 'block'}

But I am not sure how can i make it work in a sense when I click on it again it should hide the blocks again.

I have tried ng-hide/show but it doesn't work unless i remove display:none for the mobile size and when i do remove it then I am not able to see the blocks when visit the page for first time.

Please help me I have wasted so much time on it. Thanks in advance

Answer

Without a code sample it's hard to tell where you are. If you managed to get the button to hide the blocks (like you said with ng-click="showBlocks={'display': 'block'}) then adding a variable should be enough. Add this to the button element:

ng-init="show=true;" ng-click="show = !show; showBlocks={'display': (show?'block':'none')};"

If that works, then move the initialisation logic to the controller to keep things clean.

Comments