Question

我正在处理的Angular JS代码具有媒体查询，可用于限制使用以下代码显示块：

@media screen and (max-width: 370px) {
    #testGrid {
        .gridHeader {
            div:nth-child(2),
            div:nth-child(3),
            div:nth-child(n+7) {
                display: none;
            }

            div:nth-child(6) {
                border-top-right-radius: 0.4rem;
            }
        }

        .gridBody {
            div {
                div:nth-child(2),
                div:nth-child(3),
                div:nth-child(n+7) {
                    display: none;
                }
            }

        }
    }
}

我在这里的评论是，使用div:nth-child(2)之类的东西并不好，因为如果添加了另一个列，这很容易就会破坏。此外，它也很难维护。我建议给列名称匹配列内容的类名。

这仍然意味着我有一些代码可以定义哪些节目以及哪些节目没有从HTML中删除。有没有人对我使用AngularJS做的方式有任何建议，它会显示和隐藏实际<div> s旁边的列

Answer 1

您可以从$window服务获取当前宽度，以便您可以尝试以下内容：

DEMO

app.controller('MainCtrl', function($scope, $window) {

  $scope.name = 'World';

   angular.element($window).bind('resize', function(){
        $scope.hideThing = ($window.innerWidth < 400);

        // have to manually update $scope as angular won't know about the resize event
        $scope.$digest();
    });

});

然后在你的HTML

中

<body ng-controller="MainCtrl">
    <p ng-hide="hideThing" >Hello {{name}}!</p>
</body>

有没有办法显示/隐藏<div>取决于浏览器的大小？

1 个答案: