Angularjs根据屏幕大小响应隐藏和显示

Question

大家好，我正在努力实现这一目标

当用户在桌面上时，他应该在访问页面时看到块，用户在移动时应该看到按钮，然后他应该能够切换它。

我可以通过设置使用 CSS 媒体查询来显示按钮 display: none 当屏幕尺寸 display: none 到 block 通过添加 ng-click="showBlocks={'display': 'block'}

但我不确定如何让它在某种意义上发挥作用，当我再次单击它时，它应该再次隐藏块。

我已经尝试过 ng-hide/show 但它不起作用，除非我删除 display:none 的移动尺寸，当我删除它时，我无法看到块首次访问该页面。

请帮帮我，我在这上面浪费了很多时间。提前致谢

Answer 1

如果没有代码示例，就很难知道你在哪里。如果您设法获得隐藏块的按钮（就像您对ng-click="showBlocks={'display': 'block'} 所说的那样），那么添加一个变量就足够了。将此添加到按钮元素：

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

如果可行，则将初始化逻辑移至控制器以保持清洁。

Answer 2

您可以在该元素上添加一个类，如果用户单击该按钮并使用 CSS 中的 !important 标志，或者简单地在媒体查询下方定义该规则以给予该 CSS 更高的优先级，您可以在该元素上添加一个类类。

假设您在用户切换时添加force-show 类：

.force-show {
    display: block !important
}

请参阅下面的示例。 使用“整页”链接模拟以下示例中的桌面视图

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

});

.block {
  height: 100px;
  background: #ddd;
}
button {
  display: none
}
@media (max-width: 767px) {
  .block {
    display: none;
  }
  button {
    display: block;
  }
}
.force-show {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="FooController">
  <div class="block" ng-class="{'force-show': showBlock}">
    I'll only be visible on desktop or using button on mobile.
  </div>

  <button ng-click="showBlock = !showBlock">Toggle blocks
  </button>
</div>