Set different classes on click (in the most AngularJS way)

Question

I am currently learning AngularJS and already started a little project, which is basically an older project of mine, done in jQuery.

Everythings fine so far, but the last hours I wrapped my head around this area. In jQuery back then 5 minutes, but I have no idea what's the best way in AngularJS)

Here is my jQuery: A calendar view. It opens and closes days on click. Once a day is clicked it gets the class opened. Also there is the state locked, where I disable to open the day at all.

$('.mod-item').on('click', function(){
        if ($(this).find('.mod-item-day').not('.locked')) {
            if($(this).find('.mod-item-day').hasClass('open')){
                $(this).find('.mod-item-day').removeClass('open').addClass('opened');
            }else{
                $(this).find('.mod-item-day').addClass('open');
            }
        }
});

Here is the markup:

<ul class="mod">
    <li class="mod-item">
        <div class="mod-item-day opened"><span>1</span></div>
        <div class="mod-item-content">
            <img src="../images/present1_late.jpeg" alt="">
        </div>
    </li>

So my question is - what's the most AngularJS way to do it?

Also consider creating it as a component. angularjs.org/#create-components and docs.angularjs.org/guide/directive — katranci
– katranci, Commented May 30, 2013 at 8:36
thx for the tip - directives are on my angular roadmap, but too "complex" for me right now (see my basic question above) :) — florence
– florence, Commented May 30, 2013 at 13:23

T.J. Crowder · Accepted Answer · 2013-05-30 08:30:31Z

3

You do this basically the way shown in the To Do example on the Angular website.

On the day's div, specify ng-click="callbackInYourScopeCode()". In the To Do example, it's ng-click="archive()"
On the day's div's class, include a property from your model. In the To Do example, for instance, there's <span class="done-{{todo.done}}">{{todo.text}}</span>. Note the property todo.done.
In your scope code, have the function (callbackInYourScopeCode) change your model's property (done in the To Do example).

Angular will call your scope code in response to a click, and then update the element based on changes to your model.

answered May 30, 2013 at 8:30

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

florence Over a year ago

Hi, i feel stupid now. I did the tutorial side by side on my own - but never got this abstract thought of using this for this simple task. It worked, and much cleaner and simpler as my first tries!

T.J. Crowder Over a year ago

@flrnz: Don't feel stupid, we've all been there. Glad this helped!

Collectives™ on Stack Overflow

Set different classes on click (in the most AngularJS way)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related