Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.5 Task Deletion

In this lesson you'll implement task deletion. You'll learn how to find the targeted task in the app's scope and remove it, how to update the list of all tags being still being used by stored tasks, and how to commit the changes back into local storage.

2.5 Task Deletion

Hi, and welcome back to Create a Foundation for Apps Controller Using Angular JS. In this lesson, we're gonna go through setting up task deletion. Now the first thing that we're gonna need to do to make this work is adding a button inside each of the tasks in the UI. That will call a task deletion function. I've already added in this HTML here to create a button and then what we gonna do is use ng-click to call the deletion function. So just adding ng-click and never gonna have a call a function named DeleteTask. And as an argument, we're gonna parse the ID of this task, so that our controller knows which task to remove. So let task.id as our argument. All right, so that's the UI portion done, now let's head into our controller. All right, so now down below our existing CreateTask function, we're gonna add a new function named DeleteTask. So we'll say scope.DeleteTask = function and you'll recall that we're passing the ID of the task through the function when we're calling it from the UI. So we'll add in an argument to grab that task ID when it comes through. All right, the first thing that we're gonna need to do when this function is called. Is locate the task that's being targeted for deletion in our scope tasks array. And we're gonna do that using the filter method, just like we did earlier when we were pulling duplicates out of our alltags array. So add scope.tasks = scope.tasks filter and then we'll add a callback function. And this time the only argument we need on the callback function is element. And now as we iterate through every task that's inside our scope task array. All we need to do is check if that elements ID is the same as the ID that we've just received pass through our function. If the ID of the element matches, the ID that we received pass through our function, then we will not return it back into the the array. Thereby deleting it from the array. If the id of the element is different to the id that we received as an argument. That we know that's not the task we're trying to delete and we just returned it back into the array. So I will just say if element.id does not equal id, return element and that's it for the basic deletion. That task will now be removed from scope and now we can just update local storage with the altered scope tasks array. And we do that just like we did before with this line of code. But we're not quite done yet, because we need to make sure that our list of alltags is still accurate. So for example, let's say that there's a tag that's only used on this task and that tag is named dog. Now if we delete this task and that tag name dog is still in our list of alltags. There will no longer be an accurate reflection of all the tags that are being used in the app. Because there's no longer any task that's still using that tag named dog. So before we can finish this delete task function. We need to have a look at each of the tags on the task and see whether or not they're being used on other tasks as well. And we're gonna kick that process off up here in our filtering function. So we know that this if condition here evaluates to true if the task that's currently being looked at is not the one we're trying to delete. So that means that if we add in an else condition here, we'll be working with the task that we are trying to delete. So now we can take this opportunity to grab all of the tags that are being used on the task that we're trying to delete. And then we'll save those into a variable that we'll use for the rest of our process. But you'll notice that right now we're working inside a function. So to make sure that we can access this variable outside of our filtering function. We'll begin up here and we'll create our variable and we'll call it these_tags. And then back inside our else condition, we'll set the value of that variable by saying these_tags equal element.tags. So now out of these_tags variable is gonna hold an array of all the tags that were on the task that were deleted. And we're gonna need to iterate through that array of tags and check each tag to see if it's also present on another task that saved into the system. So we'll set up a for loop with this code. And then as we're going through this for loop, we'll set up a variable name check_tag. And we'll use that variable to hold the tag that we wanna check against other tasks. So we'll say equals these_tags. That's our array of tags from our deleted task and then in between square brackets, we'll put tag. So then as the tag variable that we've set up in our for loop increments every time that we go through this iteration, we look up the corresponding tag. These_tags array. So now that we have a tag to check on, we need to iterate through each one of our remaining tasks. Each one of the tasks that hasn't been deleted and see if the tag that we're checking on is present on that other task. So we'll set up another for loop. So using the same technique that we did with our check_tag variable, we're gonna create a new variable inside this for loop. And we're gonna use it look up a task from our scope.tasks array. So we'll put var this_task = $scope.tasks and then square brackets with an i in between them. Okay, now we're gonna set up a variable named tag_on_other. And what we wanna do is have this variable set to true if this tag is on another task. Or set it to false if this tag is not on any other task. And we're gonna do that with a ternary operator. So we'll add our equal sign and then what we're gonna do next is put a set of brackets. And that bracket is gonna hold the condition that determines whether a tag on other variable is set to true or false. Now what we're gonna put in between these brackets is an index of method. So we're gonna go into our this_task variable. We're gonna look at its tags and then we're gonna see if the index of our check_tag variable is equal to negative 1. So if the tag that we're checking on is present on the task that we're looking at, then it's gonna return the index of that task. So it might return an index of two or four or five, depending on what order the tags are in. But if it can't find that tag, then it will just return an index of negative 1. So if what we have in between our brackets here returns negative one, then we wanna set the value of tag on other to false. Because that means the tag that we're looking for was not on the other task. So to do that, let a question mark after our brackets and then we'll say false. But if what we have in between our brackets does not come back as negative one, then we wanna set the value of tag on other to true. Because the tag that we're checking is on another task, so to do that we'll add a colon and we'll say true. So now that we have the value of our tag on other variable set to either true or false. We can use it to delete any redundant tags out of our alltags array. So first, we'll check if the tag that we're looking at is not on another task. So we'll say if not tag_on_other, so if the tag that we're looking at is not on any of the task, we're good to get rid of it. And to do that, we're gonna use the same type of filtering process that we've been using so far. So be updating scope.alltags and we'll say scope.alltags.filter, we'll add our called back function. And as we iterate through all the elements that are inside our alltag's array. We'll return each one that does not equal the value of our check_tag variable. So that just means that every tag goes back into the alltag's array. Unless it's the tag that we've checked on and found that we need to get rid of. So let's say return element not equal to check_tag. So now scope.alltags array is fully updated, everything's as supposed to be. What we now need to do is update our local storage and we'll do that in the same way that we did before with this line of code. We'll save and recompile and now let's go give that a test run. All right, so here's our UI with our Delete Task button and we're gonna delete the second task here. And when we hit that button, you should see the second card disappear and you should also see tagfour disappear from our list of alltags. And the reason is once we delete the second task, tagfour is no longer being used by any other task. So let's give that a shot. So there we go, everything has worked properly the task we we're trying to get rid of is gone and alltags list has updated correctly. So not all of those really core important functions are in place, we've got tasks being added in, we've got tasks deleting. But another important element is to allow tasks to be edited after they've been created. In the next lesson, we're gonna add in the editing form to the UI. And that's gonna let you see how Angular's two-way data binding works. And that will lay down the groundwork that we need to build an updating system on top of that editing form. So I'll see you in the next lesson.

Back to the top