2

I was following a simple angular tutorial that basically shows a list of elements on the browser for a hard-coded array, and creates a form that adds more elements to this array and adds the new created elements on the browser directly.
After writing my code, I tried to add a new element to the array, but the implementation only adds a new element <li> without the title of it

see my code here on jsfiddle
https://jsfiddle.net/SaifHarbia/ht4jme7q/1/
the code is also posted below

my html

    <div ng-app="bookmark" ng-controller="BookCtrl">
    <ul>
    <li ng-repeat="bookmark in bookmarks">
        <a href="#" ng-click="setCurrentCategory(bookmark)">
     {{bookmark.title}}  </a>
    </li>

   </ul>
    <button type="button" ng-click="startCreating();" class="btn btn-link">
        <span class="glyphicon glipbicon-plus"></span>
        Create Bookmark
    </button>
    <br><hr/>
    <form class="create-form" ng-show="isCreating" role="form" 
    ng-submit="createBookmark(newBookmark)" novalidate>
        <div class="form-group">
            <label for="newBookmarkTitle">Bookmark Title</label>
            <input type="text" class="form-control" id="newBookmarkTitle"
      ng-mode="newBookmark.title" placeholder="Enter title">
        </div>
        <div class="form-group">
            <label for="newBookmarkURL">Bookmark URL</label>
            <input type="text" class="form-control" id="newBookmarkURL" 
     ng-mode="newBookmark.url" placeholder="Enter URL">
        </div>

        <button type="submit" class="btn btn-info btn-lg">Create</button>
        <button type="button" class="btn btn-default btn-lg pull-right" 
    ng-click="cancelCreating()">Cancel</button>
    </form>
        </div>

my javascript:

var app=angular.module("bookmark", []);

app.controller("BookCtrl", function($scope){

    $scope.bookmarks=[
        {title: "Type1", url: "http://www.somewebsite.com/"},
        {title: "Type2", url: "http://www.website.com/"}
    ]
    function resetCreateForm(){
        $scope.newBookmark={
            title : '',
            url:''     
        }
    }
    $scope.isCreating= false;
    function startCreating(){
        $scope.isCreating=true;

        resetCreateForm();
    }

    function cancelCreating(){
        $scope.isCreating = false;
    }

    function createBookmark(bookmark){

            $scope.bookmarks.push(bookmark);


            resetCreateForm();
        }
    $scope.startCreating= startCreating;
    $scope.cancelCreating=cancelCreating;
    $scope.createBookmark= createBookmark;
});
1
  • Pls check ngModel . You missed 'l' in it Commented Nov 8, 2015 at 12:03

2 Answers 2

1

First, it's ng-model not ng-mode

and second, I added an ng-click to the create button, to push the newbookmark, and I removed the reset bookmark function

<div ng-app="bookmark" ng-controller="BookCtrl">
    <ul>
    <li ng-repeat="bookmark in bookmarks">
        <a href="#" ng-click="setCurrentCategory(bookmark)">{{bookmark.title}}</a>
    </li>

</ul>
<button type="button" ng-click="startCreating();" class="btn btn-link">
        <span class="glyphicon glipbicon-plus"></span>
        Create Bookmark
    </button>
    <br><hr/>
    <form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate>
        <div class="form-group">
            <label for="newBookmarkTitle">Bookmark Title</label>
            <input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title">
        </div>
        <div class="form-group">
            <label for="newBookmarkURL">Bookmark URL</label>
            <input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL">
        </div>

        <button type="submit" ng-click="createBookmark(newBookmark)" class="btn btn-info btn-lg">Create</button>
        <button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button>
    </form>
        </div>

and the javascript..

var app=angular.module("bookmark", []);

app.controller("BookCtrl", function($scope){

    $scope.bookmarks=[
        {title: "Type1", url: "http://www.hihi2.com/"},
        {title: "Type2", url: "http://www.hihi2.com/"}
    ]
    function resetCreateForm(){
        $scope.newBookmark={
            title : '',
            url:''     
        }
    }
    $scope.isCreating= false;
    function startCreating(){
        $scope.isCreating=true;

        resetCreateForm();
    }

    function cancelCreating(){
        $scope.isCreating = false;
    }

    function createBookmark(bookmark){
          //  bookmark.id=$scope.bookmarks.length;
            $scope.bookmarks.push(bookmark);

        }
    $scope.startCreating= startCreating;
    $scope.cancelCreating=cancelCreating;
    $scope.createBookmark= createBookmark;
});
Sign up to request clarification or add additional context in comments.

Comments

0

You missed typed the ng-model as ng-mode for the elements newBookmarkTitle and newBookmarkURL. If you try now the following snippet, you will notice that works.

var app=angular.module("bookmark", []);

app.controller("BookCtrl", function($scope){

    $scope.bookmarks=[
        {title: "Type1", url: "http://www.hihi2.com/"},
        {title: "Type2", url: "http://www.hihi2.com/"}
    ]
	function resetCreateForm(){
        $scope.newBookmark={
            title : '',
            url:''     
        }
    }
    $scope.isCreating= false;
    function startCreating(){
        $scope.isCreating=true;
   		
        resetCreateForm();
    }
    
    function cancelCreating(){
        $scope.isCreating = false;
    }
    
    function createBookmark(bookmark){
          //  bookmark.id=$scope.bookmarks.length;
            $scope.bookmarks.push(bookmark);
          
        		
            resetCreateForm();
        }
    $scope.startCreating= startCreating;
    $scope.cancelCreating=cancelCreating;
    $scope.createBookmark= createBookmark;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="bookmark" ng-controller="BookCtrl">
    <ul>
    <li ng-repeat="bookmark in bookmarks">
        <a href="#" ng-click="setCurrentCategory(bookmark)">{{bookmark.title}}</a>
    </li>

</ul>
<button type="button" ng-click="startCreating();" class="btn btn-link">
        <span class="glyphicon glipbicon-plus"></span>
        Create Bookmark
    </button>
    <br><hr/>
    <form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate>
        <div class="form-group">
            <label for="newBookmarkTitle">Bookmark Title</label>
             <!-- Here was the first problem-->
            <input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title">
        </div>
        <div class="form-group">
            <label for="newBookmarkURL">Bookmark URL</label>
            <!-- Here was the second problem-->
            <input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL">
        </div>

        <button type="submit" class="btn btn-info btn-lg">Create</button>
        <button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button>
    </form>
        </div>

1 Comment

@SamJoni You are welcome. I am glad that I helped :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.