How can I enabled a ng-click action of a <div class=“row”> according to the screen size with bootstrap classes?

Question

I'm using angularJs and twitter Bootstrap form my app.

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

In > 768px version (col-sm-*) it looks like this:

In < 768px version (col-xs-*) it looks like this:

In version <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?

I know I can do this by creating two div class="row" different for different screen sizes with a hidden-xs in the first and a visible-xs in the second but I was wondering if there was a better way. some idea?

Answer 1

The more cleaner and ideal way of doing it would be to add a custom attribute(ng-click) via jquery when you are in <768px device width. Which can be done using $(window).width() .

We would be just adding or removing that attribute based on the screen width.

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

How to do it:

Since you have used Bootstrap I obviously assume the Actions column below <768px screen width would vanish.

1) Apply a class to the main parent row, say <div class="row yo-row"> .

2) We will use this class to identify the rows and insert ng-click attribute to the rows.

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

3) Now all that is left is to add the modal div for the modal to open. Simple :-)

Note: Obviously since its JavaScript doing the magic and not CSS, you need to make the scripts run again for you to see the change. Therefore, you need to go to any specific window size and reload for it to show the attribute. This will not work if you try to re-size the browser window from desktop to small screen and expect it to apply the attribute.

Answer 2

The easiest way is to created two distinct <div> and conditionnaly show the required one using the ng-if directive.

You can resolve the screen width in Angular why :

$window.innerWidth

Answer 3

You can attach a click event handler to the row which checks for the visibility of the icons. If the icons are visible, do nothing. If they are hidden, display your modal with the controls.