How do I properly submit an object into an array using Angular Js

Question

I'm trying to learn AngularJs and writing some throw away code. I'm trying to create an object Bookmark and push it into an array.

HTML:

<h2>Create a new bookmark </h2>
                <form class="form-group" ng-submit="createBookmark(newBookmark)" novalidate>
                    <!--Title-->
                    <h4>Bookmark Title</h4>
                    <input type="text" ng-model="newBookmark.title">
                    <!--Url-->          
                    <h4>Bookmark Url</h4>
                    <input type="text" ng-model="newBookmark.url">
                    <!--Submit-->
                    <button type="submit" href="#" class="btn btn-primary" id="crForm" ng-click="stopCreating()">Save</button>
                </form>

JS:

function resetCreateForm(){
        $scope.newBookmark = {
            title : '',
            url : '',
            category : $scope.currentCategory.name
        };   
    }

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

        resetCreateForm();
    }
    $scope.createBookmark = createBookmark;
    $scope.resetCreateForm = resetCreateForm;

Object:

$scope.bookmarks = [
        {id: 0, title: "Title1", url: "www.Title1.com", category: "Development"},
        {id: 1, title: "Title2", url: "www.Title2.com", category: "Development"}

];

Module and Controller:

var app = angular.module('list',[]);

app.controller('listController', function($scope){

For some reason it does not work, so far I think it's from changes in the Angular version but I could not find a way to make it work.

Pankaj Parkar · Accepted Answer · 2016-10-04 10:20:07Z

1

You have to bind resetCreateForm & createBookmark in $scope of controller so that you can access them from view.

//place this inside your controller
$scope.resetCreateForm = resetCreateForm;
$scope.createBookmark= createBookmark;

Also you don't need to call function on ng-click, on click of button ng-submit will get called. Remove ng-click="stopCreating()"

answered Oct 4, 2016 at 10:20

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Marin Tudor Over a year ago

Hi, thanks for the answer. I forgot to add the code to that in the post. I've done that and it still does not work.

Marin Tudor Over a year ago

So I removed the ng-click and it worked. Thank you so much!

Pankaj Parkar Over a year ago

@MarinTudor that's what I ask to do in my answer :) Glad to help you, Thanks :)

Collectives™ on Stack Overflow

How do I properly submit an object into an array using Angular Js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related