YoBre February 2016

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

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 thi

Answers


Arnaud Broc February 2016

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


Nikhil Nanjappa February 2016

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: This does not work if you try to resize the browser window from desktop to small screen and expect it to apply the attribute. You need to goto any specific window size and reload for it to show the attribute.

Post Status

Asked in February 2016
Viewed 2,993 times
Voted 8
Answered 2 times

Search




Leave an answer