Submit content in a form with AngularJS ng-submit and ng-model

Lukas Ruebbelke
InstructorLukas Ruebbelke

Share this video with your friends

Send Tweet

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.

Aaron
Aaron
~ 6 years ago

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.

Andy
Andy
~ 6 years ago

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?

Mihail Gumennii
Mihail Gumennii
~ 6 years ago

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(); }

Derek
Derek
~ 6 years ago

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.

Derek
Derek
~ 6 years ago

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.

Tri Logis
Tri Logis
~ 5 years ago

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.

Durgesh
Durgesh
~ 5 years ago

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

Achim Hendriks
Achim Hendriks
~ 4 years ago

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!