Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 986 of the free egghead.io lessons, plus get Angular 1.x content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Building an Angular App: Deleting an item from a collection

3:50 Angular 1.x lesson by

We are going to complete the bookmark management functionality by showing how to delete a bookmark from the bookmarks collection.

The source for this lesson can be found on Github. Tags correspond to the lesson.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We are going to complete the bookmark management functionality by showing how to delete a bookmark from the bookmarks collection.

The source for this lesson can be found on Github. Tags correspond to the lesson.

Avatar
Linauson Hazell

I haven't tried this out myself, but wouldn't the delete function break the create, since the create is based on the length of the array?

In reply to egghead.io
Avatar
Paul

It would. If you use the current version of lodash (or 4.0.0 onward), you can use _.maxBy(). You could then create a helper function to get the new id and this might look like this:

var getBookmarkId = function(){
    var item = _.maxBy($scope.bookmarks,function(item){
        //will return the object from $scope.bookmarks with the highest id
        return item.id;
     });
     return item.id + 1;
};

Then from within createBookmark you can change bookmark.id = $scope.bookmarks.length; for bookmark.id = getBookmarkId();

In reply to Linauson Hazell
Avatar
Durgesh

Hi,

Can we use the below code to delete the item from the list?

bookmarks.splice($index,1) on dom class "close".

Is it not correct way to go on production??

Thanks
MG

Avatar
venelinpetrov

This is exactly what you should do

In reply to Durgesh

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?