Responsive columns with AngularJS (and no jQuery)

Question

this feels like a really daft question because it should be so easy but I've been trying to figure it out for a day or two now! I'm trying to build a fully AngularJS app without jQuery and a couple of tricks are proving hard than I imagined.

I've got a three column layout, all within one scope using a Bootstrap layout. Left and right columns show on desktop and disappear on tablet and mobile. Two buttons toggle those columns in and out when viewing on mobile/tablet.

That's literally it! But I want to do it the AngularJS way rather than jQuery - which would be super simple, by checking the class or style and toggling show or hide.

In AngularJS, if I use ng-show or ng-hide, and toggling a variable with ng-click then they are either shown on tablet/mobile by default (they need to be hidden) or they are hidden on the desktop by default (need to be shown).

I've done quite a lot of AngularJS work, so this is making me feel a bit stupid - I have no problem with internationalisation, localisation, localStorage support etc but this one has me stumped!

Oliver Salzburg · Accepted Answer · 2014-09-15 08:47:13Z

1

You're probably hiding your outer columns with hidden-xs or similar classes. You could simply add those classes by default, but remove them on demand through the ng-class directive:

For example:

<div class="col-md-4" ng-class="{'hidden-xs' : !showLeft}">
  <h3>Left</h3>
</div>

Your controller would then add the responsive class by default:

function ColumnController( $scope ) {
  $scope.showLeft = false;
  $scope.showRight = false;
}

You can take a look at this on: http://plnkr.co/edit/s2sjC53EJNZEKpf4jRFr?p=preview

edited Sep 15, 2014 at 8:47

answered Sep 15, 2014 at 8:38

Oliver Salzburg

22.2k22 gold badges99 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oliver Salzburg Over a year ago

@ChrisSoutham It's actually even simpler than I originally suggested. I've updated my answer.

Collectives™ on Stack Overflow

Responsive columns with AngularJS (and no jQuery)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related