AngularJS 1, Building a Data-Driven App, Creating conditional styles

Sometimes, you need to be able to manage styles depending on what’s going on with your application. Now, we can do that with a directive called ng-class. It can monitor the state of a variable and add a class to your application accordingly. So, what I want to do is create a class that, whenever we click on one of these elements, instead of just showing the element, it’s going to expand this box all the way over. It’s a little bit better to do that on these two column layouts.

I think it’s better to sort of expand and give you a little bit more room to see some of the things underneath, so let’s go ahead and make this smaller for now while we work on this, and I’m going to start by going to checkinslist, and find this list item right here, where I go through each of the checkins, and what I’ll do here is add another directive, this one’s called ng-class, and then we can just put in a new variable, here. Under checkin, just like all the other ones, and we’ll call this variable userState.

So, this directive will add a class to this existing list item, depending on the value of user state, so let’s go ahead and save this, and go back into our controller, and right where I’m going to show the love and I toggle that element showing or hiding, I’m going to add a conditional that is going to check for the value of user state, so when I call this function, I’m passing along this thing called myCheckin. So, I can put that in here, myCheckin, and it’s going to receive.

As part of everything else, it gets something called userState, and we’re going to check to see if it’s a value called expanded. If that’s the case, then it’s going to go ahead and reset it to nothing. Right, so it’s going to say it equals an empty string. Otherwise, it’s going to, let’s go ahead and grab this one and paste it here, set it to expanded, and I’ve already got a style called expanded that animates the list items.

So, let’s go ahead and try this out. Save this, and come over here, and, as I mentioned, it looks really nice when you have this two column format. So, if I click on this, you can see that the whole thing sort of expands, and gives you a little bit more room to work with. And, if we click on it, it contracts. Kind of useful, when you have a lot of these checkins, to sort of focus on that individual checkin. The way that this is working, let’s go ahead and do an inspect element right around here somewhere, so right-click.

I’m using Google Chrome, and I’m going to choose Inspect, and here’s our item. So, you can see that the list item, which is right here, has a class called expanded, and, if I take this out, or if I reclick on this, you’ll see that that class will be gone, so it’s actually toggling the value based on what’s happening in our controller, and that’s a really cool way of adding functionality to your application by using some sort of CSS that modifies the interface.

Leave a Reply

Notify of