I have function.js script which includes onClickClear() and onValidate() functions, but they are not firing at all. I injected the loginCtrl in the function but it still does not fire the onClickClear() and onValidate() functions. Here is the function.js code which clears text boxes and adds validation and my main.cshtml:
var app = angular.module('HelloWorld', []);
app.controller("loginCtrl", function ($scope) {
$scope.onClickClear = function () {
$scope.UsernameTxtBox = "";
$scope.passwordTxtBox = "";
$scope.rememberMeCheckBox = "";
};
$scope.onValidate = function () {
return ($scope.UsernameTxtBox != "" && $scope.UsernameTxtBox != null) &&
($scope.passwordTxtBox != "" && $scope.passwordTxtBox != null);
};
});
<body ng-app="HelloWorld">
<div ng-controller="loginCtrl">
<div class="container">
<div class="row">
<div class="col-xs-2 col-xs-push-5">
<h3>Login</h3>
<p>
Username:<br />
<input type="text" autofocus name="UsernameTxtBox" ng-model="UsernameTxtBox" ng-minlength="3" ng-maxlength="20" placeholder="Username" required>
<span style="color: red" ng-show="form1.UsernameTxtBox.$error.minlength">Userame Should Contain Atleast 3 Characters</span>
<span style="color: red" ng-show="form1.UsernameTxtBox.$error.maxlength">Limit Exceeded</span>
</p>
<p ng-bind="name"></p>
<p>
Password:<br />
<input type="password" name="passwordTxtBox" ng-model="passwordTxtBox" ng-minlength="3" ng-maxlength="20" placeholder="Password" required>
<span style="color: red" data-ng-show="form1.passwordTxtBox.$error.minlength">Password Should Contain Atleast 3 Characters</span>
<span style="color: red" data-ng-show="form1.passwordTxtBox.$error.maxlength">Limit exceeded</span>
</p>
<p ng-bind="surname"></p>
<div class="checkbox">
<label>
<input type="checkbox" data-ng-model="rememberMeCheckBox" data-ng-disabled="!onValidate()">Remember me</label>
</div>
<button type="button" class="btn btn-success btn-success btn-sm" data-ng-click="onClickClear()" ng-disabled="!onValidate()">Clear</button>
<button type="button" class="btn btn-primary btn-sm" data-ng-click="onClickLogin()" ng-disabled="!onValidate()">Login</button>
<button type="button" class="btn btn-link btn-xs" data-ng-click="onClickOpen()">Not A Member? Register</button>
</div>
</div>
</div>
</div>
</body>
I am not sure what you do, but the example is working in code snippet... It's basically cut and paste from your code and I just change body tag to div and add the two input box for username and password.
var app = angular.module('HelloWorld', []);
app.controller("loginCtrl", function ($scope) {
$scope.onClickClear = function () {
$scope.UsernameTxtBox = "";
$scope.passwordTxtBox = "";
$scope.rememberMeCheckBox = "";
};
$scope.onValidate = function () {
return ($scope.UsernameTxtBox != "" && $scope.UsernameTxtBox != null) &&
($scope.passwordTxtBox != "" && $scope.passwordTxtBox != null);
};
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="HelloWorld">
<div ng-controller="loginCtrl">
<div class="container">
<div class="row">
<div class="col-xs-2 col-xs-push-5">
<h3>Login</h3>
<div class="form-group"><input class="form-control" ng-model="UsernameTxtBox" placeholder="Username"></div>
<div class="form-group"><input class="form-control" type="password" ng-model="passwordTxtBox" placeholder="Password"></div>
<div class="checkbox">
<label>
<input type="checkbox" data-ng-model="rememberMeCheckBox" data-ng-disabled="!onValidate()">Remember me</label>
</div>
<button type="button" class="btn btn-success btn-success btn-sm" data-ng-click="onClickClear()" ng-disabled="!onValidate()">Clear</button>
<button type="button" class="btn btn-primary btn-sm" data-ng-click="onClickLogin()" ng-disabled="!onValidate()">Login</button>
<button type="button" class="btn btn-link btn-xs" data-ng-click="onClickOpen()">Not A Member? Register</button>
</div>
</div>
</div>
</div>
</div>
Related
I've created a clone function on html file. But there's a weird error in code. when I put two ending 'div' in same line, the JavaScript code just work fine. but when I beautify html code or put the last ending tag in another line, the JavaScript just doesn't work. please look at the commented line
<body>
<div class="container">
<div class="col-2 m-3 bg-primary" id="show">working</div>
<button id="bt" class="btn btn-outline-primary ml-4 mt-2" onclick="hide()">remove</button>
<div id="error" class="text-danger ml-3"></div>
<div id="myList" style="list-style-type:none;" class="mt-3">
<div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2"
onclick="removeIt()">X</button>
</div>
</div>
</div></div> <!-- this line is causing issue -->
<button onclick="addElement()" class="btn btn-outline-primary ml-4 mt-2">Add</button>
<div class="form-check">
<label class="form-check-label" for="numbers">
Number Of Row
</label>
<input type="number" class="form-input" name="" id="numbers" value="1">
</div>
<button onclick="passNumber()" class="btn btn-primary btn-lg" >Go</button>
</div>
<script>
let error = document.getElementById('error');
function passNumber(){
let numbers = document.getElementById('numbers').value;
for(let i = 1; i <= numbers; i++){
addElement();
}
}
function hide() {
document.getElementById('show').style.display = 'none';
}
function addElement() {
error.innerHTML = '';
let item = document.getElementById('myList').lastChild;
let cln = item.cloneNode(true);
document.getElementById('myList').appendChild(cln);
}
function removeIt() {
let list = document.getElementById('myList');
if(list.childNodes.length == 2){
error.innerHTML=`you cant delete the last input box`;
}else{
let length = list.childNodes.length;
list.removeChild(list.childNodes[length-1]);
}
}
</script>
this code works fine. but when I change the code into below lines, then the JavaScript just don't work at all -
<body>
<div class="container">
<div class="col-2 m-3 bg-primary" id="show">working</div>
<button id="bt" class="btn btn-outline-primary ml-4 mt-2" onclick="hide()">remove</button>
<div id="error" class="text-danger ml-3"></div>
<div id="myList" style="list-style-type:none;" class="mt-3">
<div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2"
onclick="removeIt()">X</button>
</div>
</div>
</div>
</div> <!-- this line is causing issue -->
<button onclick="addElement()" class="btn btn-outline-primary ml-4 mt-2">Add</button>
<div class="form-check">
<label class="form-check-label" for="numbers">
Number Of Row
</label>
<input type="number" class="form-input" name="" id="numbers" value="1">
</div>
<button onclick="passNumber()" class="btn btn-primary btn-lg" >Go</button>
</div>
<script>
let error = document.getElementById('error');
function passNumber(){
let numbers = document.getElementById('numbers').value;
for(let i = 1; i <= numbers; i++){
addElement();
}
}
function hide() {
document.getElementById('show').style.display = 'none';
}
function addElement() {
error.innerHTML = '';
let item = document.getElementById('myList').lastChild;
let cln = item.cloneNode(true);
document.getElementById('myList').appendChild(cln);
}
function removeIt() {
let list = document.getElementById('myList');
if(list.childNodes.length == 2){
error.innerHTML=`you cant delete the last input box`;
}else{
let length = list.childNodes.length;
list.removeChild(list.childNodes[length-1]);
}
}
</script>
lastChild is the last child node of any kind, including text nodes. By moving the closing </div> tag, you're adding a text node.
You could use lastElementChild instead to get only the last element in the list.
Here's a simplified example:
console.log(document.getElementById("container1").childNodes.length); // 2
console.log(document.getElementById("container2").childNodes.length); // 3
<div id="container1">
<div>x</div></div>
<div id="container2">
<div>x</div>
</div>
Side note: Your HTML is invalid. div elements cannot be direct children of ul elements. ul elements are expected to contain li elements as their only direct (element) children.
I'm still learning to programme.
How I can show and hide two not very different HTML forms with a button in Angular?
I have a code but it shows only two forms and doesn't hide them.
I want to display these two forms on one row. How I can do this?
Please help me.
My HTML code:
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button class="btn btn-primary" ng-click="showDiv=true; hideMe()" >Show Div</button>
<button class="btn btn-primary" ng-click="showDiv1=true; hideMe()" >Show Div1</button>
<div ng-show="showDiv">
<div class="col-xl-3">
<div class="form">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Запазване</button>
</form>
</div>
</div>
</div>
<div ng-show="showDiv1">
<div class="col-xl-3">
<div class="form">
<form>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">Потребител</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Парола</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Оператор</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Отлагане</button>
</form>
</div>
</div>
</div>
</body>
</html>
Angular code. Maybe it is not very right i think, but you will help me.
Thanks again!
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.hideMe = function(){
console.log('hide the button');
$scope.hide();
}
});
You have to set variable to false(ng-show), and then when user click the button, set variable to true:
Leave ng-click attribute like this:
<button class="btn btn-primary" ng-click="hideDiv()" >Show Div</button>
<button class="btn btn-primary" ng-click="hideDiv1()" >Show Div1</button>
Then:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.showDiv = false;
$scope.showDiv1 = false;
$scope.hideDiv = function(){
if ($scope.showDiv) {
$scope.showDiv = false;
} else {
$scope.showDiv = true;
}
}
$scope.hideDiv1 = function(){
if ($scope.showDiv1) {
$scope.showDiv1 = false;
} else {
$scope.showDiv1 = true;
}
}
});
Here is a demo that may help you get started. Go over the docs for ng-show and ng-click
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
$scope.showHello = true;
$scope.showBye = false;
$scope.toggleBye = () => {
$scope.showBye = !$scope.showBye;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="HelloController">
<h2 ng-show="showHello">Hello</h2>
<h2 ng-show="showBye">Bye</h2>
<h2>Show always</h2>
<button ng-click="toggleBye()">toggle bye</button>
</div>
</body>
how I can reload a modal window after click on a button?
Here there is the controller of modal window
(function(){
'use strict';
angular
.module('casalibroApp')
.controller('ModificaAggiungiLibroController', ModificaAggiungiLibroController);
ModificaAggiungiLibroController.$inject = ['$uibModalInstance', 'entity', '$scope', 'Libro', 'CancellaAutore', '$state'];
function ModificaAggiungiLibroController($uibModalInstance, entity, $scope, Libro, CancellaAutore, $state){
var vm = this;
vm.itemsPerPage = 1;
vm.currentPage = 1;
vm.nuovoAutore = false;
vm.libro = entity;
vm.clear = function() {
$uibModalInstance.dismiss('cancel');
}
vm.save = function() {
vm.isSaving = true;
if (vm.libro.id !== null) {
Libro.update(vm.libro).$promise
.then(function(result){
$scope.$emit('casalibroApp:libroUpdate', result);
$uibModalInstance.close(result);
vm.isSaving = false;
}, function(){
vm.isSaving = false;
});
}else{
Libro.save(vm.libro).$promise
.then(function(result){
$scope.$emit('casalibroApp:libroUpdate', result);
$uibModalInstance.close(result);
vm.isSaving = false;
}, function(){
vm.isSaving = false;
});
}
}
vm.test = function(autoreId, libroId){
console.info("AUTORE ID: ", autoreId);
console.info("LIBRO ID: ", libroId);
CancellaAutore.get({libroId: libroId, autoreId: autoreId}).$promise
.then(function(){
console.info("CURRENT: ", $state.current);
$state.go('welcome.book-edit', {}, {reload: true});
}, function(error){
AlertService.error(error.data.message);
});
}
}
})();
The function vm.test is the action that run on a click on button. The function work correctly and also the reload
$state.go('welcome.book-edit', {}, {reload: true});
but this open a new modal window on top of the other modal window
HTML for modal window
<form name="editForm" role="form" novalidate ng-submit="vm.save()" show-validation>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"
ng-click="vm.clear()">
×
</button>
<div ng-switch="vm.libro.id">
<h4 ng-switch-default class="modal-title" id="windowTitle">
Modifica libro {{vm.libro.titolo}}
</h4>
<h4 class="modal-title" id="windowTitle" ng-switch-when="null">
Aggiungi un libro alla libreria
</h4>
</div>
</div>
<div class="modal-body">
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Libro">
<ng-form name="nestedForm">
<div class="form-group" ng-show="vm.libro.id != null">
<label for="libroId">ID</label>
<input type="text" class="form-control" ng-model="vm.libro.id" readonly="true" name="libroId"/>
</div>
<div class="form-group">
<label for="libroTitolo">Titolo</label>
<input type="text" name="libroTitolo" class="form-control" ng-model="vm.libro.titolo"/>
</div>
<div class="form-group">
<label for="libroGenere">Genere</label>
<input type="text" name="libroGenere" class="form-control" ng-model="vm.libro.genere.genere"/>
</div>
<div class="form-group">
<label for="libroPagine">Numero di pagine</label>
<input type="text" name="libroPagine" class="form-control" ng-model="vm.libro.numero_pagine"/>
</div>
<div class="form-group">
<label for="libroAnnoPubblicazione">Anno di pubblicazione</label>
<input type="text" class="form-control" name="libroAnnoPubblicazione" ng-model="vm.libro.anno_pubblicazione"/>
</div>
<div class="form-group">
<label for="libroDescrizione">Descrizione</label>
<textarea rows="5" cols="65" maxlength="250" ng-trim="false" ng-model="vm.libro.descrizione" name="libroDescrizione" class="form-control"></textarea>
<p>Totale caratteri inseriti: {{vm.libro.descrizione.length}}/250</p>
</div>
<div class="form-group">
<label for="libroCopertina">Copertina</label>
<input type="text" class="form-control" name="libroCopertina" ng-model="vm.libro.copertina_url"/>
</div>
</ng-form>
</uib-tab>
<uib-tab index="1" heading="Autore" disable="vm.libro.titolo === null">
<div ng-repeat="autore in vm.libro.autores.slice(((vm.currentPage-1)*vm.itemsPerPage), ((vm.currentPage)*vm.itemsPerPage))">
<div class="form-group">
<label for="autoreNome">Nome</label>
<input type="text" name="autoreNome" class="form-control" ng-model="autore.nome"/>
</div>
<div class="form-group">
<label for="cognomeAutore">Cognome</label>
<input type="text" class="form-control" name="cognomeAutore" ng-model="autore.cognome"/>
</div>
<div class="form-inline">
<button type="button" class="btn btn-danger" ng-show="vm.libro.autores.length > 0" ng-click="vm.test(autore.id, vm.libro.id)">
<span class="glyphicon glyphicon-remove-circle"></span>
<span>Elimina autore</span>
</button>
<button type="button" class="btn btn-primary" ng-click="vm.nuovoAutore=true">
<span class="glyphicon glyphicon-plus"></span>
<span>Aggiungi autore</span>
</button>
</div>
</div>
<uib-pagination total-items="vm.libro.autores.length" ng-model="vm.currentPage" ng-change="vm.transition()" boundary-link-numbers="true" previous-text="Previous" next-text="Next" first-text="First" last-text="Last" items-per-page="vm.itemsPerPage"></uib-pagination>
</uib-tab>
<uib-tab index="2" heading="Casa Editrice" disable="vm.libro.titolo === null">
<div class="form-group" ng-show="vm.libro.id != null">
<label for="casaEditrice">Nome</label>
<input type="text" name="casaEditrice" class="form-control" ng-model="vm.libro.casaEditrice.nome"/>
</div>
<div class="form-row" style="margin-top: 5px;">
<button type="button" class="btn btn-primary" ng-show="vm.libro.id == null">
<span class="glyphicon glyphicon-plus"></span>
<span>Aggiungi casa editrice</span>
</button>
</div>
</uib-tab>
</uib-tabset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()">
<span class="glyphicon glyphicon-ban-circle"></span> <span>Cancel</span>
</button>
<button type="submit" ng-disabled="editForm.$invalid || vm.isSaving" class="btn btn-primary">
<span class="glyphicon glyphicon-save"></span> <span>Save</span>
</button>
</div>
</form>
I would like to create dynamically some input fields, that I used ng-repeat with ng-model. I meet some problems. ng-model without ng-repeat works correctly (transitPointStart). transits should work exactly the same, but they don't. What am I missing?
(link to plunker on the bottom)
transitPointStart:
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="field_start">Start Point</label>
<input type="text" class="form-control" name="field_start" id="field_start"
ng-model="transitPointStart.city" placeholder="e.g. London"
/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="field_start_date">Date</label>
<div class="input-group">
<input id="field_start_date" type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM"
name="field_start_date"
datetime-picker="{{dateformat}}" ng-model="transitPointStart.date"
is-open="datePickerOpenStatus.field_start_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openCalendar('field_start_date')"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
transits:
<div class="row" ng-repeat="transit in transits">
<!--TEST-->
<!--<div> Model: {{transit.modelName}} </div>-->
<!--<div> dateModel: {{transit.dateModelName}} </div>-->
<!--<div> datePicker: {{transit.datePickerName}} </div>-->
<!--<div> fieldName: {{transit.fieldName}} </div>-->
<!--<div> fieldDateName: {{transit.fieldDateName}} </div>-->
<!--<div> button: {{transit.buttonDateName}} </div>-->
<!--/TEST-->
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="transit.fieldName">Transit {{$index+1}}</label>
<input type="text" class="form-control" name="transit.fieldName" id="transit.fieldName"
ng-model="transit.modelName" placeholder="transit"
/>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label class="control-label" for="transit.fieldDateName">Date {{$index+1}}</label>
<div class="input-group">
<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g"
name="transit.fieldDateName"
datetime-picker="{{dateformat}}" ng-model="transit.dateModelName"
is-open="transit.datePickerName"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="transit.buttonDateName"><i
class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-2">
<span class="btn btn-primary" ng-click="addTransit()" ng-if="transits.length < 3">Add transit</span>
</div>
<div class="col-lg-2"></div>
</div>
controller:
$scope.transits = [];
$scope.addTransit = function () {
var tempId = $scope.transits.length + 1;
var tempName = "transitPoint_" + tempId;
var tempModelName = tempName + ".city"; // Here I would like to have access to transitPoint.city
var tempDateName = tempName + ".date"; // as above (transitPoint.date)
var tempDate = "datePickerOpenStatus.field_transit_date_" + tempId;
var tempFieldName = "field_transit_" + tempId;
var tempFieldDateName = "field_transit_date_" + tempId;
var tempButton = "openCalendar('" + tempFieldDateName + "')";
$scope.transits.push({
modelName: tempModelName,
dateModelName: tempDateName,
datePickerName: tempDate,
fieldName: tempFieldName,
fieldDateName: tempFieldDateName,
buttonDateName: tempButton
});
}
/*
{...} - rest of code, sending queries (vm.save() ect.)
*/
$scope.datePickerOpenStatus = {};
$scope.datePickerOpenStatus.field_start_date = false;
$scope.datePickerOpenStatus.field_end_date = false;
// I should've used loop here
$scope.datePickerOpenStatus.field_transit_date_1 = false;
$scope.datePickerOpenStatus.field_transit_date_2 = false;
$scope.datePickerOpenStatus.field_transit_date_3 = false;
$scope.openCalendar = function (date) {
$scope.datePickerOpenStatus[date] = true;
};
Demo: Plunker
Some of the bindings in your HTML are not correct. You need to use interpolation (the {{ }} format) whenever you need to emit data from the model into the HTML.
For example, when assigning IDs, you have:
<input id="transit.fieldDateName" type="text" class="form-control" placeholder="e.g" name="transit.fieldDateName" ...
This should be:
<input id="{{transit.fieldDateName}}" type="text" class="form-control" placeholder="e.g" name="{{transit.fieldDateName}}" ...
Second, your ng-click syntax is not correct. You should not create the openCalendar expression in JavaScript, but in your HTML, like so:
<button type="button" class="btn btn-default" ng-click="openCalendar(transit.fieldDateName)">
I think your Plnkr is missing some scripts and/or steps to make the calendar work, but these changes will at least cause your openCalendar function to get called.
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">
{{bookmark.title}}
</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">
{{bookmark.title}}
</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>