如何根据 bootstrap 类 的屏幕尺寸启用 <div class="row"> 的 ng-click 操作？

Question

我正在使用 angularJs 和 Twitter Bootstrap 形成我的应用程序。

        <div class="row">
            <div class="col-xs-12">
                <div class="row yo-bold">
                    <div class="col-xs-6 col-sm-5">
                        {{ "KEY" | translate | capitalize}}
                    </div>
                    <div class="col-xs-6 col-sm-5">
                        {{ "LABELS" | translate | capitalize}}
                    </div>
                    <div class="hidden-xs col-sm-2">
                        {{ "ACTIONS" | translate | capitalize}}
                    </div>
                </div>
                <hr />
                <div class="row yo-mb5 yo-div-table" ng-repeat="l in langs | filter:searchText | orderBy: '_id' track by $index" ng-class="$index % 2 == 0 ? 'yo-bg-grey' : ''">
                    <div class="col-xs-6 col-sm-5">
                        {{ l._id }}
                    </div>
                    <div class="col-xs-6 col-sm-5">
                        <div class="row" ng-repeat="lang in langsAvailable track by $index">
                            <div class="col-xs-12">
                                <flag country="{{lang | getLangCode}}" size="16"></flag>&nbsp;&nbsp;{{ l[lang] }}
                            </div>
                        </div>
                    </div>
                    <div class="hidden-xs col-sm-2">
                         <button class="btn btn-xs btn-warning" ng-click="openLangModal(l)"><i class="fa fa-pencil"></i></button> <button class="btn btn-xs btn-danger" ng-click="removeLabel(l._id)"><i class="fa fa-trash"></i></button>
                    </div>
                </div>
            </div>
        </div>

在 > 768px 版本 (col-sm-*) 中看起来像这样：

在 < 768px 版本 (col-xs-*) 中它看起来像这样：

在 <768px 版本中，我删除了动作列，然后在整行上插入一个 ng-click，打开一个模态并在模态中选择所需的动作。 可以吗？

我知道我可以通过为不同的屏幕尺寸创建两个不同的 div class="row" 来做到这一点，第一个是隐藏的 xs，第二个是可见的 xs其次，但我想知道是否有更好的方法。有什么想法吗？

Answer 1

最简单的方法是创建两个不同的 <div> 并使用 ngif 指令有条件地显示所需的一个。

您可以在 Angular 中解决屏幕宽度问题，原因 :

$window.innerWidth

Answer 2

更简洁、更理想的方法是当您的设备宽度小于 768 像素时，通过 jquery 添加自定义属性 (ng-click)。这可以使用 $(window).width().

来完成

我们只是根据屏幕宽度添加或删除该属性。

if ( $(window).width() < 768) {     
  //code goes here
}

怎么做：

由于您使用了 Bootstrap，我显然假设 <768px 屏幕宽度下方的 Actions 列将消失。

1) 将 class 应用于主父行，例如 <div class="row yo-row">。

2) 我们将使用此 class 来识别行并将 ng-click 属性插入行。

if ( $(window).width() < 768) {     
  $('.yo-row').attr("ng-click", "openModal()");
}

3) 现在剩下的就是添加模态 div 以便模态打开。简单:-)

注意：很明显，因为它 JavaScript 发挥了作用而不是 CSS，您需要再次制作脚本 运行 才能看到变化。因此，您需要转到任何特定的 window 大小并重新加载它以显示属性。如果您尝试将浏览器 window 从桌面调整为小屏幕并希望它应用该属性，这将不起作用。

Answer 3

您可以将点击事件处理程序附加到检查图标可见性的行。如果图标可见，则什么都不做。如果它们是隐藏的，请使用控件显示您的模式。