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;
});
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;
});
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.