Delete an item from a collection in AngularJS

Man: [00:00] Welcome to another video in the Eggly series where I am going to show you how to delete a bookmark from the bookmarks collection.

[00:11] At this point you should be able to start to identify some common patterns from previous videos. For instance, if you want to call a method from the view to the controller, you can do that using ng-click or ng-submit. Or if you want to make a method available for the view, then you can attach it to scope and so on.

[00:35] This is going to be a fairly straightforward and simple lesson, but I want you to focus on identifying some patterns of things that we've done in previous videos and understanding why we're doing them. From there, you can start to, then, apply these techniques to your own work.

[00:56] What we want to hook up is when we click this X button or this delete button, we want to remove that bookmark from the bookmarks collection.

[01:09] In the JavaScript, we are going to create a method called "Delete bookmark" that accepts a bookmark parameter and then, from here, using lo-dash, we are going to iterate over the bookmarks collection and using the remove method, compare the current bookmark ID to the bookmark parameter ID.

[01:45] If that returns true, then it removes it from the collection. I'm using lo-dash here, but you can actually use a variety of libraries that accomplish the same thing. For instance, you can use sugar, you can use underscore. I like lo-dash. In a lot of cases, you can actually use some of the Angular built in functions that come with the library.

[02:11] Generally, it kind of depends on what the client is actually using, but I think, for the most part, they are about the same. I just happen to be using lo-dash in this particular case.

[02:25] We need to make this available on the scope and this is literally all of the functionality we need in the controller to delete a bookmark. We're simply passing out a bookmark, comparing the ID, if it matches with the bookmark from the collection, then we remove it.

[02:50] From here, the very next thing that we need to do is call the "Delete bookmark" method. We'll go up here to this button with the X in it, using ng-click. We are going to call "Delete bookmark" and pass in the bookmark.

[03:17] Let's refresh the page and see this in action. When I click this, it's going to call "Delete bookmark" and remove it from the collection. Super straightforward. Super easy. By now I'm hoping that you're starting to see some of these patterns and starting to put your thinking cap on to how you could actually do some of these things in your own applications.

[03:41] This concludes this video. Thanks for hanging out with me. I look forward to seeing you on more Eggly videos in the future. Stay tuned.