Modify State with ng-model and an AngularJS controller

AngularJS

Share this video with your friends

We are going to learn how to edit an existing bookmark by building on a lot of the same techniques from the previous video. We will also learn how to edit a bookmark and not actually save the change back to the collection until we are ready.

Find the code on Github. Tags correspond to the lesson.

Israel

~ 10 years ago

for some reason my active class didn't work to highlight the bookmark being edited. The div surrounded this code has the main class which in the css seems to be correct.

<div ng-class="{'active':isSelectedBookmark(bookmark.id)}" ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}"> <button type="button" class="close">×</button> <button type="button" ng-click="setEditedBookmark(bookmark);startEditing()" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span></button> <a href="{{bookmark.url}}" target="_blank">{{bookmark.title}}</a> </div>

CSS:

.main .active span, .main .active > a { color: #5bc0de; }

Jay

~ 10 years ago

There is a minor bug with the active class on the bookmark. When you cancel editing, it still shows that the bookmark you were editing is active. The fix is similar to the fix in the create video - set editedBookmark to null when cancelEditing is called.

Xavier

~ 10 years ago

I second that, I added setEditedBookmark(null);

Piyush

~ 10 years ago

Is there an alternative to using Lodash for finding a bookmark in the collection? I'd love to go learn Lodash, but for the moment I want to stay here.

Henrique Zavareze

~ 9 years ago

For some reason my underscore function always returns -1. Any thoughts?

''' var index = _.findIndex($scope.bookmarks, function (b) { return b.id = bookmark.id; }); '''

Kyle Kerley

~ 8 years ago

Everything in this video is working except for the actual updating of the record. No matter what I do, when I hit "save" on the edit form, the changes are not reflected in the list of bookmarks.

EDIT: Turns out, it's because I was coding this in a simple HTML file without Bootstrap (or using the provided code on Github so I could get a feel for coding it all myself) and therefore missed the part where I had to manually include the lodash library. After that was added, everything worked fine.

Sina

~ 8 years ago

using '=' is for assigning values. If you want to compare, you need to use '==' or '==='