如何啟用的ng-click操作 <div class=“row”> 根據屏幕尺寸使用引導程序類？

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鍵並單擊，打開模式，然后在模式中選擇所需的動作。 有可能嗎

我知道我可以通過為兩個不同的屏幕尺寸創建兩個不同的div class =“ row”來做到這一點，其中第一個為隱藏X，第二個為可見X，但是我想知道是否有更好的方法。 有想法嗎？

Answer 1

做到這一點更干凈，更理想的方法是，當設備寬度小於768px時，通過jquery添加自定義屬性（ng-click）。 可以使用$(window).width() 。

我們只是根據屏幕寬度添加或刪除該屬性。

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

怎么做：

由於您已經使用了Bootstrap，因此我顯然假定屏幕寬度<768px以下的“ 操作”列將消失。

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

最簡單的方法是創建兩個不同的<div>並使用ng-if指令有條件地顯示所需的一個。

您可以在Angular中解析屏幕寬度，原因如下：

$window.innerWidth

Answer 3

您可以將click事件處理程序附加到該行，以檢查圖標的可見性。 如果圖標可見，則什么也不做。 如果它們是隱藏的，則顯示帶有控件的模態。