The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building an Angular App: Add a bookmark with ng-submit and ng-model

Building an Angular App: Add a bookmark with ng-submit and ng-model

5:38
We are going to learn how to create a bookmark by adding it to the bookmarks collection. We will learn how to submit the contents of a form to the controller to be processed by exploring ng-submit and ng-model. The source for this lesson can be found [here on Github](https://github.com/eggheadio/egghead-angularjs-from-scratch-getting-started/tree/05-create-bookmark). Tags correspond to the lessons.
Watch this lesson now
Avatar
egghead.io

We are going to learn how to create a bookmark by adding it to the bookmarks collection. We will learn how to submit the contents of a form to the controller to be processed by exploring ng-submit and ng-model.

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

Avatar
Aaron

Interesting. In Angular 1.2.1, it works exactly as described in the video.

But in Angular 1.3.8, I had to change...
category: $scope.currentCategory
to...
category: $scope.currentCategory.name
... in order for the newly created bookmark to appear in the view.

Avatar
Andy

I also needed to modify the resetCreateForm() function. It confused me for a while, but looking at it now, it seems as though that should be correct as within the $scope.newBookmark object, category needs to be assigned the name of the current category, rather than the current category object. Does anyone else have a different understanding of this?

Avatar
Aviad

Hi,
It seems that new Angular JS had broke some API's and this example is not fully working. Is that possible to give some notes regarding the changes in this video?

Thanks.

In reply to egghead.io
Avatar
Mihail

I had to add category to "createBookmark" function and it works for me... (angular version 1.3.13)

function createBookmark(bookmark) {
bookmark.id = $scope.bookmarks.length;
bookmark.category = $scope.currentCategory;
$scope.bookmarks.push(bookmark);
resetCreateForm();
}

Avatar
Derek

I had the same issue. The example would not work for me until I used ..

category: $scope.currentCategory.name

Interesting. In Angular 1.2.1, it works exactly as described in the video.

But in Angular 1.3.8, I had to change...
category: $scope.currentCategory
to...
category: $scope.currentCategory.name
... in order for the newly created bookmark to appear in the view.

In reply to Aaron
Avatar
Derek

Hi Andy,

That is the way I understood it also. It seemed to make more sense that the "name" property of the category object be used.

In reply to Andy
Avatar
Tri

Thanks for this tips! Without this suggestion I wasn't able to add a bookmar to bookmarks.
I tested it with Angular 1.4.8.

In reply to Derek
Avatar
Durgesh

As you mentioned in the video that on product you will not assign "Bookmark ID's" in following way :-

bookmark.id = $scope.bookmarks.length;

Can you please share the details what will the correct way for production???

Apart from it, I have implemented a validation check before adding any new bookmart which will ensure no blank bookmark will be added.

Here is the code :-

function createBookmarkFrm(bookmark) {
    if(bookmark && bookmark.title) {
      bookmark.id = $scope.bookmarks.length;
      bookmark.category = $scope.selectedCat.name;
      $scope.bookmarks.push(bookmark);
      resetCreateForm();
    } else {
        alert('Error...');
    }
}

Please do share your feedback....

Thanks
MG

Avatar
Achim

Hello!

Is there a reason why your createBookmark function has got the "bookmark" parameter when the data is available from $scope.newBookmark?

Appreciating your reply! Thanks a lot in advance!

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