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

Question

嗨，我想要实现的每一个

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

我可以通过设置显示使用CSS媒体查询的按钮     当屏幕尺寸小于＆lt; 480px并且还能够恢复时，显示：无     通过添加 ng-click =＆＃34; showBlocks = {＆＃39; display＆＃39;：＆＃39; block＆＃，显示：无到阻止 39;}

但是我不知道如果我再次点击它会在某种意义上使它工作，它应该再次隐藏块。

我已经尝试了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
}

请参阅下面的示例。 使用＆＃34;整页＆＃34;链接以模拟以下示例中的桌面视图

＆＃13;

＆＃13;

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

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

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;