angularjs - toggle ng-class from multiple ng-clicks

Question

angularjs - toggle ng-class from multiple ng-clicks

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>

angularjs

Answer 1

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