I'm trying out the form example that you can find here: https://docs.angularjs.org/guide/forms
I cannot make it work in my own page. It ends up with this error:
TypeError: undefined is not a function
at pre (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:178:192)
at J (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:53:156)
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:399)
at J (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:53:286)
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:399)
at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:416)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:67
at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:18:67
at h.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:108:482)
at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:109:235)
I cannot figure out why; see below for my index.html page source:
<head>
<!-- JQUERY -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-sanitize.js"></script>
</head>
<body ng-app>
<div ng-controller="Controller">
<form novalidate class="simple-form">
Name: <input type="text" ng-model="user.name" /><br />
E-mail: <input type="email" ng-model="user.email" /><br />
Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
</body>
<script>
function Controller($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
According to angular's FAQ: Does Angular use the jQuery library?:
Due to a change to use on()/off() rather than bind()/unbind(), Angular 1.2 only operates with jQuery 1.7.1 or above.
Here is an example of your code working with the 1.7.2 version of jQuery: http://plnkr.co/edit/DFEMno6d7ovbXbgoNvhw?p=preview
Related
Can anyone please explain to me how to create a custom service for displaying the array .the array is created inside the service and a function savedata() which saves the objects in the array.like wise another function i want to create which will display the array. thanks in advance
<!DOCTYPE html>
<html ng-app="noteApp">
<head>
<title>Note App</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="noteCtrl">
<form name="noteForm">
NoteId: <input type="number" name="id" ng-model="note.id" required>
NoteTitle: <input type="text" name="title" ng-model="note.title" required>
NoteDiscription: <input type="text" name="discription" ng-model="note.discription" required><br><br>
<button ng-click="add()" ng-disabled="noteForm.$invalid">Click</button>
</form>
<div ng-repeat="number in noteArray track by $index">
<h3>{{::number.id}}</h3>
<h3>{{::number.title}}</h3>
<h3 >{{::number.discription}}</h3>
</div>
</div>
<script>
var app=angular.module('noteApp',[]);
app.service('dataService',function(){
var noteArray=[];
this.saveData=function(data){
console.log(noteArray);
return noteArray.push(data);
}
this.displayData=function(){
//return zz;
}
});
app.controller('noteCtrl',function($scope,dataService) {
$scope.add=function(){
dataService.saveData($scope.note);
//dataService.displayData();
}
});
</script>
</body>
</html>
You are on the right track, just return the array inside the displayData()
this.displayData=function(){
return noteArray;
}
DEMO
var app=angular.module('noteApp',[]);
app.service('dataService',function(){
var noteArray=[];
this.saveData=function(data){
console.log(noteArray);
return noteArray.push(data);
}
this.displayData=function(){
return noteArray;
}
});
app.controller('noteCtrl',function($scope,dataService) {
$scope.noteArray=[];
$scope.add=function(){
dataService.saveData($scope.note);
$scope.noteArray = dataService.displayData();
}
});
<html ng-app="noteApp">
<head>
<title>Note App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="noteCtrl">
<form name="noteForm">
NoteId: <input type="number" name="id" ng-model="note.id" required><br><br>
NoteTitle: <input type="text" name="title" ng-model="note.title" required>
<br><br>
NoteDiscription: <input type="text" name="discription" ng-
model="note.discription" required><br><br>
<button ng-click="add()" >Click</button>
</form>
<div ng-repeat="number in noteArray track by $index">
<h3 >{{number.id}}</h3>
<h3 >{{number.title}}</h3>
<h3 >{{number.discription}}</h3>
</div>
</div>
</body>
</html>
Well I think that you need some like that:
'use strict';
app.factory('$shared',[function(){
function foo() {
var self = this;
self.list = [];
}
return new foo();
}]);
app.controller('mainCtrl', ['$scope', '$shared', function($scope, $shared){
$scope.shared = $shared;
//... many things here
$scope.onClick = function() {
// be sure that, I use "shared" from $scope, no directly like "$shared"
$scope.shared.list.push("val1");
console.log("my shared array:", $scope.shared.list);
}
}]);
app.controller('secondCtrl', ['$scope', '$shared', function($scope, $shared){
$scope.shared = $shared;
//... many things here
$scope.onKeyPress = function() {
// be sure that, I use "shared" from $scope, no directly like "$shared"
$scope.shared.list.push("val2");
console.log("my shared array:", $scope.shared.list);
}
}]);
Here is my angular view,
<label class="control-label">skipColumns:</label>
<br />
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" class="form-control" ng-model="skipColumn[0]" /><br />
</fieldset>
<button class="btn btn-default" ng-click="addNewSkipColumn(skipColumn)">Add SkipColumn</button>
<br />
which adds new textfield every time i click addSkipColumn button.
here is my js code:
$scope.config.skipColumns = [];
$scope.addNewSkipColumn = function (skipColumn) {
if($scope.config.skipColumns==null){
$scope.config.skipColumns=[];
}
$scope.config.skipColumns.push([]);
}
so the problem is when I display or see the structure of $scope.config.skipColumns, It gives the following output:
{
skipColumns:[["content of textfield1"],["content of textfield1"]..]
}
But what I need is,`
{
skipColumns:["content of textfield1","content of textfield1",..]
}
please help me.("content of textfield" resfers to form data)
What you need here is to change what you are pushing in config.skipColumns array. Like this:
$scope.addNewSkipColumn = function(skipColumn) {
$scope.config.skipColumns.push("");
}
And, ng-repeat would be like:
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" ng-model="config.skipColumns[$index]" />
</fieldset>
(why did I not use skipColumn directly in the ng-model?)
Here's working example:
angular.module("myApp", [])
.controller("ctrl", function($scope) {
$scope.config = {};
$scope.config.skipColumns = [];
$scope.addNewSkipColumn = function(skipColumn) {
$scope.config.skipColumns.push("");
}
})
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<label class="control-label">skipColumns:</label>
<br />
<fieldset ng-repeat="skipColumn in config.skipColumns track by $index">
<input type="text" class="form-control" ng-model="config.skipColumns[$index]" />
</fieldset>
<button class="btn btn-default" ng-click="addNewSkipColumn()">Add SkipColumn</button>
<br />
<br>
<pre>{{config.skipColumns}}</pre>
</body>
</html>
See this... Just push value instead of array.
var app = angular.module('angularjs', []);
app.controller('MainCtrl', function($scope) {
$scope.choices = ['choice1'];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push('choice'+newItemNo);
};
$scope.removeChoice = function() {
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div ng-app="angularjs" ng-controller="MainCtrl">
<fieldset data-ng-repeat="choice in choices">
<select>
<option>Mobile</option>
<option>Office</option>
<option>Home</option>
</select>
<input type="text" ng-model="choice.name" name="" placeholder="Enter mobile number">
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</fieldset>
<button class="addfields" ng-click="addNewChoice()">Add fields</button>
<div id="choicesDisplay">
{{ choices }}
</div>
</div>
I am a true beginner at Angular (but not JS), started yesterday, so I hope you forgive me if this question sound stupid. Consider the following small application:
HTML:
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="/js/TestController.js"></script>
</head>
<body ng-controller="TestController as myControl">
<div id="overlaybox">
<button ng-click="myControl.showUpd(4)">Test</button><br/><br/><br/>
<form ng-submit="myControl.updTodo()">
Note:<br/>
<textarea rows="5" cols="30" id="updContent" ng-model="noteupd.content"></textarea><br/>
Deadline (format YYYY-MM-DD HH:MM):<br/>
<input type="text" id="updDeadline" ng-model="noteupd.deadline" /><br/>
Completed:
<input type="checkbox" id="updCompleted" ng-model="noteupd.completed" /><br/>
<input type="hidden" id="updID" ng-model="noteupd.id" /><br/>
<input type="submit" value="Update" />
</form>
</div>
</body>
</html>
Angular-controller:
angular.module('todoApp', []).controller('TestController', function($scope, $http) {
var thisApp = this;
thisApp.showUpd = function(noteID) {
$http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
.then (function(response) {
console.log(response.data.content);
console.log(response.data.deadline);
console.log(response.data.id);
console.log(response.data.completed);
document.getElementById("updContent").innerHTML = response.data.content;
document.getElementById("updDeadline").value = response.data.deadline;
document.getElementById("updID").value = response.data.id;
if (response.data.completed == 1) {
document.getElementById("updCompleted").checked = true;
} else {
document.getElementById("updCompleted").checked = false;
}
}, function() {
alert("Error getting todo note");
});
}
thisApp.updTodo = function(noteupd) {
console.log("TEST");
console.log($scope.noteupd);
}
});
After clicking Test-button I get the following output in my console:
TestController.js:7 123123
TestController.js:8 2016-01-05 10:28:42
TestController.js:9 4
TestController.js:10 0
By then, the fields in the form have been filled in (and the hidden field has a value). And after clicking Update I get this in the console:
TestController.js:27 TEST
TestController.js:28 undefined
If i change the values in the fields manually, I do get something else instead of "undefined", but the idea is that one should not have to change the values. Also, the object does not contain the hidden "id" even if all fields are changed.
Obviously, I'm a beginner at this, and obviously I'm doing it wrong, but do anyone have a suggestion on how I can make this work?
Your html is fine but your code needs fixing
First define noteupd in your code
Use noteupd to change your html values rather then document.getElementById
That should fix your code it will end up looking like this
angular.module('todoApp', []).controller('TestController', function($scope, $http) {
var thisApp = this;
$scope.noteupd={}; //defining noteupd
var noteupd=$scope.noteupd; //preventing scope issues
thisApp.showUpd = function(noteID) {
$http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
.then (function(response) {
console.log(response.data.content);
console.log(response.data.deadline);
console.log(response.data.id);
console.log(response.data.completed);
//updating your html
noteupd.content= response.data.content;
noteupd.deadline = response.data.deadline;
noteupd.id= response.data.id;
if (response.data.completed == 1) {
noteupd.completed = true;
} else {
noteupd.completed = false;
}
}, function() {
alert("Error getting todo note");
});
}
thisApp.updTodo = function(noteupd) {
console.log("TEST");
console.log($scope.noteupd);
}
});
If you are using this variable against $scope .. you have always ng-controller with alias , and you can only access properties or methods of controller with controller alias only ..
if you didnt use ng-controller= "TestController as myController"
and not access methods as myController.method() .. your example won't be worked...(section 2)
Here is some examples to describe you how it is work
Check this tutorial too ..
http://plnkr.co/edit/FgBcahr6WKAI2oEgg4cO?p=preview
angular.module('todoApp', []).controller('TestController', function($scope, $http) {
var thisApp = this;
$scope.readedTodo = {};
this.noteupd = {};
thisApp.showUpd = function(noteID) {
// changed your url as defat json data
$http({
method: 'GET',
url: 'data.json'
})
.then(function(response) {
console.log(response.data);
console.log(response.data.content);
console.log(response.data.deadline);
console.log(response.data.id);
console.log(response.data.completed);
thisApp.noteupd = response.data;
$scope.readedTodo = response.data;
}, function() {
alert("Error getting todo note");
});
}
thisApp.updTodo = function(noteupd) {
console.log("TEST");
console.log(thisApp.noteupd);
}
});
<!doctype html>
<html ng-app="todoApp">
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="overlaybox" ng-controller="TestController as myControl">
<button ng-click="myControl.showUpd(4)">Test</button>
<br/>
<br/>
<br/>
<form ng-submit="myControl.updTodo()">
<h3>if you use binding h this against $scope</h3> Note:
<br/>
<textarea rows="5" cols="30" id="updContent" ng-model="myController.noteupd.content"></textarea>
<br/> Deadline (format YYYY-MM-DD HH:MM):
<br/>
<input type="text" id="updDeadline" ng-model="myController.noteupd.deadline" />
<br/> Completed:
<input type="checkbox" id="updCompleted" ng-model="myController.noteupd.completed" />
<br/>
<h3>if you use binding with $scope</h3> Note:
<br/>
<textarea rows="5" cols="30" id="updContent2" ng-model="readedTodo.content"></textarea>
<br/> Deadline (format YYYY-MM-DD HH:MM):
<br/>
<input type="text" id="updDeadline222" ng-model="readedTodo.deadline" />
<br/> Completed:
<input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
<br/>
<input type="hidden" id="updID" ng-model="readedTodo.id" />
<br/>
<input type="submit" value="Update" />
</form>
</div>
<h3>SEction 2 </h3>
<div id="overlaybox2" ng-controller="TestController ">
<button ng-click="showUpd(4)">Test</button>
<button ng-click="showUpdate(4)">Test</button>
<br/>
<br/>
<br/>
<form ng-submit="updTodo()">
<h3>if you use binding h this against $scope</h3> Note:
<br/>
<textarea rows="5" cols="30" id="updContent" ng-model="readedTodo.content"></textarea>
<br/> Deadline (format YYYY-MM-DD HH:MM):
<br/>
<input type="text" id="updDeadline" ng-model="readedTodo.deadline" />
<br/> Completed:
<input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
<br/>
<h3>if you use binding with $scope</h3> Note:
<br/>
<textarea rows="5" cols="30" id="updContent2" ng-model="readedTodo.content"></textarea>
<br/> Deadline (format YYYY-MM-DD HH:MM):
<br/>
<input type="text" id="updDeadline222" ng-model="readedTodo.deadline" />
<br/> Completed:
<input type="checkbox" id="updCompleted" ng-model="readedTodo.completed" />
<br/>
<input type="hidden" id="updID" ng-model="readedTodo.id" />
<br/>
<input type="submit" value="Update" />
</form>
</div>
</body>
</html>
I am trying to create a circular progress loader that shows each progress of filling form input . As form is filled completely . The loader should show 100%. Here's the whole code I am using .
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
First name: <input type="text" name="firstname" required="required"><br>
Last name: <input type="text" name="lastname" required="required">
Age: <input type="text" name="age" required="required">
Gender: <input type="text" name="gender" required="required">
City: <input type="text" name="city" required="required">
Locality: <input type="text" name="locality">
Address: <input type="text" name="address">
</form>
<p id='percentage'>0% completed</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id="myctrl" ng-app='app' ng-controller="MyCtrl">
<p ng-model="counter"></p>
<input type="text" value="{{counter}}" class="dial">
</div>
</body>
<script src="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
$(".dial").knob({
readOnly: true,
fgColor: "#00ABC6",
bgColor: "#666666",
thickness: 0.2
});
$(document).ready(function(){
$('input').on('change', function(){
var cntreq = 0;
var cntvals = 0;
$('input').each(function(i, val) {
if($(this).attr('required') == 'required') {
cntreq++;
if($(this).val() != '') {
cntvals++;
}
}
});
var count = (cntvals/cntreq)*100;
//$('#percentage').empty();
//$('#percentage').append(count+'% completed');
angular.element($("#myctrl")).scope().anyFunc(count);
//$('.dial').val(count);
});
});
angular.module('app', [])
.controller('MyCtrl', function ($scope) {
$scope.anyFunc = function (var1) {
alert(var1);
$scope.counter = var1;
};
});
</script>
</body>
</html>
This loader changes as wechange value of input tag so I am using angular js to pass count variable to input value . So as we fill each input it will change automatically .
I found this loader from here "http://jsfiddle.net/CU7KM/"
and form percent calculator from here "http://jsfiddle.net/ktozh5sd/2/".
I am trying to achieve a circular loader that show progress of every input field.
I have updated my script code to the following after reading about documentation on migrating from 1.2 to 1.3.
var app = angular.module("APP", []);
app.controller('Ctrl', function ($scope) {
$scope.id = [{
id: 'id #1'
}];
$scope.addNewId = function () {
var newId = $scope.id.length + 1;
$scope.id.push({
'id': 'id #' + newId
});
};
$scope.removeId = function (index) {
if (index >= 1) {
$scope.id.splice(index, 1);
}
};
});
This is the code for the form:
<!DOCTYPE html>
<html lang = "en" ng-app = "APP">
<head>
<meta charset = "utf-8">
<title>Add New ID</title>
<link rel="stylesheet" href="form.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script type = "text/javascript" src = "form.js"></script>
</head>
<body ng-controller="Ctrl">
<section>
<h1>Add New Stuff</h1>
<form name = "form" id = "form">
<div ng-model = "indiv">
<fieldset class="ids" data-ng-repeat="indiv in id">
<legend>ID</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" size="60"> 
<label for="age">Age:</label>
<input type="text" name="age" id="age" size="60"> 
<button type="button" name="lookup" id="lookup">LOOKUP</button> 
<button class="remove" ng-click="removeId($index)">Remove ID</button><br>
</fieldset>
<br>
<button class="addfields" ng-click="addNewId()">Add ID</button>
</div>
<input type="submit" name="submit" id = "submit" value="SUBMIT">
</form>
</section>
</body>
It is supposed to add a new set of input fields to a form. Please help
An id attribute can't contain space nor sharp character here you are setting :
{id: 'id #1'}
May be a part of the answer if you're attributing this value to the id of each input in your ng-repeat.
can you show us the form ?