In order to build interfaces that react to what users are doing, we can ask AngularJS to display different styles in our views depending on what's going on with our database.
- [Instructor] 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…
Learn how to create forms, edit database records, create methods, randomize record selections, and style and secure your app. With these project-based lessons, you'll learn how to see how data-driven programming with AngularJS can help your apps react to real-time data streams.
- Customizing an Angular template
- Adding forms to create meetings and check in users
- Adding, showing, and deleting database records
- Using events to track meetings
- Adding a form to the app
- Creating methods
- Randomizing prizes
- Creating conditional styles
- Managing app permissions