Angular.js根据屏幕大小进行隐藏和显示 [英] Angularjs hide and show according to screen size responsive

问题描述

我正在努力实现这一目标

Hi every one I am trying to achieve this

当用户使用桌面设备时，他在访问该页面时应该看到该阻止，而当用户在移动设备上时该用户应该看到该按钮，那么他应该能够对其进行切换.

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.

我可以通过设置CSS媒体查询来显示按钮显示:无(当屏幕尺寸小于480像素且还可以还原通过添加 ng-click ="showBlocks = {'display':'block'}

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.

我尝试了ng-hide/show，但除非我删除了移动设备尺寸的 display:none ，否则它将无法正常工作，当我删除它时，我将无法看到障碍物第一次访问该页面.

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

推荐答案

没有代码示例，很难分辨出您的位置.如果您设法找到隐藏块的按钮(如您对 ng-click ="showBlocks = {'display':'block'} 所说的)，则添加一个变量就足够了.到按钮元素:

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.

这篇关于Angular.js根据屏幕大小进行隐藏和显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！