2.7 Process Edited Tags

Hey, welcome back to create a Foundation for Apps Controller using AngularJS. In the last lesson, we set up this task editing form here. But right now, if you edit the tags, things are not processed properly on edit. So in this lesson, we're gonna set up our update tags function, so that any time anything is changed in this tags editing field down here, we process the contents of that field properly into a collection of distinct tags. Okay, so here we are back in our app.js file. So the first thing we're gonna need to do, is set up our update tags function. So we're gonna say scope.UpdateTags = function and we're gonna pass the ID of the task that's being edited through as an argument. Now the first thing that we're gonna need to do is find the task that's being edited inside our scope tasks array. To do that we're gonna set up a variable called findTask, and just like we have a couple times so far, we're gonna use the filter method. So we'll say, scope.task.filter and then we'll add in our callback function. Okay, so as this filtering method is going through the tasks that we have saved into our scope, we'll know we have the right one when the ID of the current element matches the ID that's being passed through our function as an argument. So we're gonna add if element.ID equals ID and then in here, that's where we're going to process our updated tags before we return this element back into the array. And then we're also going to need to add in an else down here, so that every element other than the one we're targeting gets returned as is so just add return element here. All right, so now up here, having found the element or the task that we're targeting for editing, we're gonna use the same steps to process these tags as we did in a previous lesson. So the first thing we're gonna need to do is make sure that we locate any instances of a space that's following a comma and replace it with just a straight comma. So create a variable named tags. And then we're gonna go into the element that we found, look up the tags that are attached to it. Then we're gonna use the replace method, to find every instance of a space following a comma, and replace that with just a comma. And now we wanna update the elements tags by splitting the contents of this tags variable that we just created, which is currently just a string with a comma separated list of tags. But we wanna split that string into an array. So we'll say tags.split, and then we're gonna split that string every time we find a comma. And then finally we just want to return or updated element back into the array. Now we'll save that, and we're going to have a look at the results in our app. And this time we added at text, now you can see that everything is being processed properly. We retain our original three tags that we have there and the new tag that we've just added in has also been added in correctly. So now we've got our two-way data binding working on all three of our input fields here. We've got our edited tags being processed properly. And now all we need to do is get this Update button firing off our update tasks function, and processing all of our edited data into local storage. And that's what we're gonna cover in the next lesson. I'll see you there!