2.4 Display Tasks and Tags
Now that we have tasks being added into local storage and a collection of tags being maintained, we want to display these so we can ensure everything is working as expected. We’ll be using Foundation for Apps’ built-in UI styling to make this process quick and straightforward, leaving us to focus on code rather than design.
1.Introduction2 lessons, 05:03
2.Creating Your Controller10 lessons, 1:02:17
3.Conclusion1 lesson, 01:30
2.4 Display Tasks and Tags
Hey, welcome back to Create a Foundation for Apps Controller using AngularJS. In this lesson, we're gonna set up a little bit of basic UI just so we can see the tasks that are being set up in our task manager app, and so we can also see the tags that are being tracked, that are being used across all of those tasks. As I mentioned before, we're not gonna focus too heavily on UI in this course because there is another course that you can follow that will take you through the UI aspect of things, but you do need to know a little bit just enough so you can check and make sure that your controller is all working how you want it to be working. Okay, so to start with, we're gonna set up the display of all the tags that have been tracked. So every tag that's being used across every task that is saved into the Task Manager local storage. So I've got a little bit of basic HTML set up for that tag display here. And if you wanna know more about the classes that you're seeing in this HTML here, you can check out the documentation for foundation for apps. And of course, you can also follow the up and running with foundation for apps course. And what we wanna do is have each one of the tags that are contained inside our old tags array to show up wrapped by this span tags and we want the span tags to repeat for every tag that's inside our old tags array. So to make that happen, we're going to use ng-repeat. So put ng-repeat equals and this ng-repeat will iterate through any object or any array that we give it, and we want it to repeat through the old tags array that we have attached to that scope variable that we talked about in earlier videos. And then we want it to give us every tag that's in all tags. So we'll say, "tag in allTags" and they're also gonna add in track by $index. And this just helps angular to keep track of all of the individual entries in an array or an object as it's cycling through them. So now that we have this ng-repeat giving us every tag. That's in old tags. We can take that tag word and we can wrap it in two curly brackets in between as span tags. So now we know UI, every tag that's found inside old tags will be printed out where you see these two curly brackets here and it'll be wrapped inside these span tags and then the whole thing will repeat for every tag in the collection and then down here we're going to do a similar thing for every one of our tasks. So in this div here. We're gonna add another ng-repeat. And this time, we wanna get every task that's in that scope tasks array that we set up earlier. So just like above, we'll say "task in tasks" and we'll also track by index. We have two spaces set up to display our tasks title and its body. And this task piece of information is going to contain the tasks title, body, and tags. So to pull the title out of that task information, we're gonna add another set of curly brackets and this time we're going to put task.title. Now we'll do the same thing for the body. We're going to put task.body. And as you all know from our previous lesson, each individual task also contains an array of tags. So we can add in one more ng-repeat to iterate those tags. We're using a span tag, just like we did above, we'll add ng-repeat again and this time we're gonna say "tag in task.tags", and we'll start tracked by index again, and then we'll lead tags in between curly brackets again. All right, so we'll save that bullet foundation, re-compile everything. And then you can see the All Tags heading showing up on OUI letting us know that I've date has worked. All right, so let's add in a couple of new tasks, so I'll hit on title description and some tags, and there's our new task showing up in the card that we set up down here. And all of our tags are being displayed across the top here. All right, so let's add in a second task, let in a title again and another description and some more tags. All right, so now we've got our two tags. Each one of them is showing out inside the card that we set up in OUI. And we also have a display showing us each individual tag that has been used across both of these tasks that have been entered into the system. So that's all good to go. And we're ready to move on to the next stage. In the next lesson, we're gonna learn how to set up task deletion. So far, you've just been using a couple of lines of code to manually remove anything from storage but that's just wiping out everything that's been saved in local storage. We need to be able to individually delete a task and then we also need to be able to look and see if the task that's being deleted might have a tag on it that then needs to be removed from the old tags array. So we'll go through how you can do that in the next lesson.