Angularjs 1, Building a Data-Driven App, Deleting award records

So, you probably know what we need to do next. We need to find a way of deleting some of these awards that we’ve given, so we’re going to do that by placing some buttons, and pretty much doing what we’ve done with this delete button right here. So, this will be a little bit of a review. Right on top of the award name, I’m going to create a div with a class of buttons, and then I’m going to create a button here. It’s going to have some classes for display just like before, btn, btn-delete, and then award, tooltip also.

Let’s go ahead and make this window bigger, so we can see it a little better. So, our button is going to activate with the ng-click directive, a function called deleteLove and we’ll pass along the current checkin as well as the key to the checkin that we want to delete. So, this checkin right here is of course, the same checkin that we’re in, which comes from the loop of checkins, so we can actually pass the information from the individual checkins so that we have the data for the specific item that we want to delete from.

And then the key will be the unique key to the award that we want to delete. You could pass along the whole award, but all we really need is the key, so I’ll just pass that. Then, let’s go ahead and create the tooltip by using this span here, and it’ll just say “Delete this award.” All right, this is going to have only one button, but let’s go ahead and give it a comment. Let’s go ahead and save that and take a look at how it looks, so when we open this up, we should see these little delete buttons here.

And we need to write, of course, the controller for it. It’s going to be pretty simple, we’ll go into checkins.js and in here we can do this right after we giveLove, we’ll create something in scope called deleteLove since that’s what we’re calling, and that’s going to be a function that gets the information about the checkin as well as some sort of key. All right, so in here we’re going to create a reference to the checkin that we want to delete, and we’re going to have to build it like we’ve done this one up here.

Again, let’s make this wider so we can see things a little bit better. It’s going to be a reference to this Love that we want to delete, the award that we want to delete. And we’re going to use the reference, right? So, this reference is the original reference that we get to all of the checkins. From there, we’re going to need to get a child and get the checkin using this myCheckin variable, using also the id variable so we get the hash for the checkin, and then we’ll get the child, it’s under awards and then get the child and this will use our key.

So, this will get us to the individual checkin that we need to delete. To remove something from Firebase, you need to use a Firebase object, so we’ll create this record as a Firebase object and we’ll pass along this reference that we’ve created. Then all we really need to do just take that record and remove it, passing along the key. And that will take care of deleting the individual record.

So, let’s go ahead and save it. And we’ll open one of these up, let’s just add something random here, hit the plus sign, and you can see that it’s got this one right here. And if we click delete, and it looks like it’s not deleting, so I’m noticing that I’m actually missing a c right here. Let’s go ahead and do that again, so open this one up, we see all the different gifs, and if we delete this one, it should get rid of it. So, now we only have two again, and that’s perfect, so this is really just a review of everything we’ve been doing.

You should be pretty familiar with the process of handling things through the different controllers and the views and how Firebase allows you to work with its own records.

Leave a Reply

Notify of