7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.10 Task Status Setting

Another key UI feature covered in Up and Running With Foundation for Apps is the ability to switch a task’s status between “complete” and “incomplete” and have its appearance change accordingly. In this lesson, you’ll add task status switching to your controller.

Related Links

2.10 Task Status Setting

Hi, and welcome to the final lesson of Create a Foundation for Apps Controller Using Angular JS. In this last lesson, we're going to add the ability to set the status of each task to either complete or incomplete. And the first thing we're gonna need to do is add in the buttons to the UI that are gonna to fire off this switching. So I have the basic HTML already in place here. Just have two buttons, one marked complete and one marked incomplete. And these buttons are gonna work in a very similar way to the SetTaskColor buttons that we created in the last lesson. We're gonna use ng-click again, but this time, instead of firing off the SetTaskColor function, we're gonna to have it fire off a function named SetTaskStatus. We're gonna have two arguments again. And once more, the first argument will be the task ID, and this time, the second argument will be the status that we want to set the task with. So we'll add this into a complete button first, ng-click = SetTaskStatus. The task.id as the first argument and the string complete as the second argument. Now we want to do the same thing for the incomplete button. And we'll just shortcut that by copying this ng-click code and pasting it into our incomplete button, then changing the string in the second argument to incomplete. And we're gonna have our SetTaskStatus function change the status property of a task. So we're also gonna just go up here and create a display of the current task status by adding curly brackets and then task.status. All right, so let's go back to our app.js file and create our SetTaskStatus function. So just like we've done before, the first thing we want to do is create our SetTaskStatus function. This time we're gonna be passing two arguments, we'll be passing the task ID and its status. And what we're gonna to do with our SetTaskStatus is almost identical to what we did with our SetTaskColor function. So we'll make creating this function much quicker by grabbing a copy of all the code in our SetTaskColor function, and we'll paste it into our SetTaskStatus function. And we actually only need to change one line of code here. What we're trying to do with this function is change the status of our task, not the color. So instead of editing element.color, we wanna edit element.status. And then we wanna give it the status value that's being passed through our argument. So our SetTaskStatus function is now complete. And just like we did with our color changing function, we need to set an initial task status for a task when it's first created. So we'll go back up to the CreateTask function. And then under the line where we've set our task.color, we'll also set initial task.status. And of course, any brand new task is not yet gonna be complete, so we'll set that initial task status to incomplete. Okay, let's save that out, and then we'll head back into our app to see our task's data switching working. Okay, so now you can see our two buttons down here to change our TaskStatus from Complete to Incomplete or vice versa. You'll notice that there's no current status showing on any of the current tasks. And that's just because we didn't have this functionality in place when we created these tasks. But if we click one of these buttons now, there's our incomplete status and we can switch that to complete and there's our complete status. And if we create a brand new task, now you see that by default, the current status is incomplete. And that's it, you've completed your entire task manager controller. Everything is in full working order, you've got all the features that need to be in place, and you've got all the groundwork laid for the UI design phase. Please join me in the final video of this course, where we're just gonna recap what you've learned. And I'll give you some tips and pointers on what you might like to look at next to continue building on your app development skills, your Angular skills, and your controller creation skills. I'll see you in the final video.

Back to the top