如何根据引导类的屏幕尺寸启用 <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 version (col-xs-*) it looks like this:

在版本中<768px I removed the column of actions and I would insert a ng-click on the entire row, open a modal and choose the desired action within the modal. Is possible?

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

Answer 1

更干净、更理想的方法是在 <768px device width. Which can be done using

$(window).width()

中通过 jquery 添加自定义属性（ng-click）。

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

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

如何做：

既然你已经使用了 Bootstrap，我显然假设下面的 Actions 列 <768px screen width would vanish.

1) 将一个类应用于主父行，例如

<div class="row yo-row">

。

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

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

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

注意：显然，由于是 JavaScript 而不是 CSS 发挥了作用，因此您需要再次运行脚本才能看到更改。因此，您需要转到任何特定的窗口大小并重新加载它才能显示该属性。如果您尝试将浏览器窗口的大小从桌面调整为小屏幕并期望它应用该属性，则此操作将不起作用。

Answer 2

您可以将单击事件处理程序附加到检查图标可见性的行。如果图标可见，则不执行任何操作。如果它们被隐藏，请使用控件显示您的模式。

Answer 3

最简单的方法是创建两个不同的

<div>

并使用 ng-if 指令有条件地显示所需的一个。

您可以在 Angular 中解析屏幕宽度，为什么：

$window.innerWidth