angularjs - toggle ng-class from multiple ng-clicks

Question

I've just started working on a project that requires me to learn AngularJS. What I'm trying to do is create two menus that slide into the screen, one from the left, one from the right. When they do this they push the content over.

Currently I can get one or the other to work, but not both. I realize this is because of the way that I'm defining the ng-class. I just can't quite conceptualize how to do it correctly.

<div ng-class="{true:'slide-left', false:''}[toggleSlide]" class="container">

    <div class="content">
        <button ng-click="toggleSlide = !toggleSlide" class="btn-left">From Left</button>
        <button ng-click="toggleSlide = !toggleSlide" class="btn-right">From Right</button>
    </div>

    <div class="slide-from-left">
        <p>Here is information that slides from off screen left.</p>
    </div>

    <div class="slide-from-right">
        <p>Here is information that slides from off screen right.</p>
    </div>
</div>

Its hard to understand what you're trying to do. Do you want both to be able to be displayed at the same time? Maybe you just need 2 variables - One for sliding left and out, the other for sliding right and out. — Justen
– Justen, Commented Apr 2, 2013 at 20:14
Only one should be displaying at a time. If you've seen the functionality of Facebook app on an iPhone, it's very similar to the swipe left for your account menu, swipe right for the contacts on chat. I'll work on getting a jsfiddle up shortly. — Hughes
– Hughes, Commented Apr 2, 2013 at 21:14
Try and get a plunkr up or give some more info. For now I'll take a stab in the dark with this:<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container"> — Justen
– Justen, Commented Apr 3, 2013 at 4:01
Justen, that worked great! I just didn't know what the syntax was to get multiple classes and variables into the ng-class. Cheers! — Hughes
– Hughes, Commented Apr 3, 2013 at 13:55

Justen · Accepted Answer · 2013-04-03 14:14:05Z

2

Set up the ng-class syntax like this for what you want:

<div ng-class="{'slide-left':toggleSlide, 'slide-right':!toggleSlide}" class="container">

Also, I'm guessing you were trying to adapt your code to something else you saw, so I'll offer something on that also. Here's an ng-class using ng-repeat's $index to dole out classes for even and odd:

ng-class="['even', 'odd'][$index % 2]"

answered Apr 3, 2013 at 14:14

Justen

4,8799 gold badges48 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

angularjs - toggle ng-class from multiple ng-clicks

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related