In this code taken from angular.org:
angular.copy
<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>
<script>
function Controller($scope) {
$scope.master= {};
$scope.update = function(user) {
// Example with 1 argument
$scope.master= angular.copy(user);
};
$scope.reset = function() {
// Example with 2 arguments
angular.copy($scope.master, $scope.user);
};
$scope.reset();
}
</script>
I can't determine where the json member is being defined. I've seen this in many of the examples on the site. What does it evaluate to?
it's a filter and it is part of angular's code - github
function jsonFilter() {
return function(object) {
return toJson(object, true);
};
}
Related
I can't understand how to push object into an array I tried few different ways and still can't figured it out.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function() {
$scope.userInfo.push($scope.users)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>
at click of add button I push the users information in userInfo properities. I works on first time but If I modified the the value already stored value also modified(after push value is modifying).
try angular.copy, this will copy the exist object with a new instance.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function() {
var user = angular.copy($scope.users);
$scope.userInfo.push(user);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray()">Add</button>
<pre>{{userInfo}}</pre>
</div>
You need to empty yours users before setting it to new values:
$scope.userInfo = [];
$scope.pushInArray = function(data) {
$scope.userInfo.push(data)
$scope.users = null;
}
HTML:
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>
Here is the working Plnkr
You need to pass the object to the scope function to persist it.
var app = angular.module('myApp',[])
app.controller('dropdown', function($scope, $http){
$scope.userInfo = [];
$scope.pushInArray = function(data) {
var entry = (JSON.parse(JSON.stringify(data)));
$scope.userInfo.push(entry);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="dropdown">
<input type="text" name="name" ng-model="users.name" placeholder="Name">
<input type="text" name="email" ng-model="users.email" placeholder="Email">
<input type="text" name="phoneNo" ng-model="users.phoneNo" placeholder="phone Number">
<button ng-click="pushInArray(users)">Add</button>
<pre>{{userInfo}}</pre>
</div>
This is my app.js
volkswagenApp
.controller('VolkswagenCtrl',
['$http' , function($http){
var vw = this;
vw.gegevens = [];
$http.get('autos.json').success(function(data){
vw.gegevens = data;
});
}]);
volkswagenApp
.controller('FormController',function(){
this.gegevens={};
/*this.addGegevens = function(gegeven) {
gegeven.gegevens.push(this.gegeven);
this.gegevens={};
}*/
this.addGegevens = function(gegeven){
this.gegevens.datum = Date.now();
vw.gegevens.push(this.gegeven);
this.gegeven = {};
}
});
and this is my index.html:
<span ng-show="show">
<form name="inputForm" class="form-group" ng-controller="FormController as autoctrl"
ng-submit="inputForm.$valid && autoctrl.addGegevens(gegeven)" novalidate>
<br>
<p> Type: <input type="text" name="autoctrl.type" ng-model="type" style="margin-left:52px; padding-left:5px; width:165px;" minlength="2" maxlength="10" required /></p>
<p>Bouwjaar: <input type="number" name="bouwjaar" ng-model="autoctrl.bouwjaar" style="margin-left:22px; padding-left:5px; width:165px;" minlength="4" maxlength="4" required /></p>
<p>Km: <input type="number" name="km" ng-model="autoctrl.km" style="margin-left:60px; padding-left:5px; width:165px;" minlength="2" maxlength="6" required /></p>
<p>Brandstof: <input id="select" name="brandstof" ng-model="autoctrl.brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>
<p>Kenteken: <input type="text" name="kenteken" ng-model="autoctrl.kenteken" style="margin-left:22px; padding-left:5px; width:165px;" minlength="6" maxlength="9" required /></p>
<p>Datum: <input type="text" name="datum" ng-model="autoctrl.datum" style="margin-left:40px; padding-left:5px; width:165px;" minlength="3" maxlength="11" required /></p>
<p>checked: <input type="checkbox" name="checked" ng-model="autoctrl.checked" style="margin-left:28px;" required /></p>
<br>
<button class="btn btn-primary" type="submit" value="submit">Toevoegen</button>
<div>{{inputForm.$valid}}</div>
and this is the error in the console:
Error: Can't find variable: vw
I know that the variable W isn't defined in FormController, my question is how can i adjust the form controller so that it works.
I tried everything, searched the docs. watched several tutorials and i cant find out where im going wrong. This is for a school project. Please help!
In the FormController add vm = this at beginning.
autoctrl.addGegevens(inputForm) and
in the addGegevens function
this.addGegevens = function(inputForm){
this.gegevens.datum = Date.now();
for (var formField in inputForm){
if(inputForm.hasOwnProperty(formField)){
vw.gegevens.push({formField :inputForm[formField] });
}
}
}
You want to share VW variable to another controller. In order to do this you can use $rootScope. Please check below code which will work for you. Below is the updated span block
<span ng-show="show">
<form name="inputForm" class="form-group" ng-controller="FormController as autoctrl"
ng-submit="inputForm.$valid && autoctrl.addGegevens(gegeven)" novalidate>
<br>
<p> Type: <input type="text" name="autoctrl.type" ng-model="autoctrl.gegevens.type" style="margin-left:52px; padding-left:5px; width:165px;" minlength="2" maxlength="10" required /></p>
<p>Bouwjaar: <input type="number" name="bouwjaar" ng-model="autoctrl.gegevens.bouwjaar" style="margin-left:22px; padding-left:5px; width:165px;" minlength="4" maxlength="4" required /></p>
<p>Km: <input type="number" name="km" ng-model="autoctrl.gegevens.km" style="margin-left:60px; padding-left:5px; width:165px;" minlength="2" maxlength="6" required /></p>
<p>Brandstof: <input id="select" name="brandstof" ng-model="autoctrl.gegevens.brandstof" style="margin-left:20px; padding-left:5px;" minlength="3" maxlength="7" required/></p>
<p>Kenteken: <input type="text" name="kenteken" ng-model="autoctrl.gegevens.kenteken" style="margin-left:22px; padding-left:5px; width:165px;" minlength="6" maxlength="9" required /></p>
<p>Datum: <input type="text" name="datum" ng-model="autoctrl.gegevens.datum" style="margin-left:40px; padding-left:5px; width:165px;" minlength="3" maxlength="11" required /></p>
<p>checked: <input type="checkbox" name="checked" ng-model="autoctrl.gegevens.checked" style="margin-left:28px;" required /></p>
<br>
<button class="btn btn-primary" type="submit" value="submit">Toevoegen</button>
<div>{{inputForm.$valid}}</div>
{{ PostDataResponse}}
{{autoctrl.gegevens.type}}
{{autoctrl.gegevens.bouwjaar}}
</form>
</span>
And you can find the latest app code below
var volkswagenApp = angular.module('volkswagenapp', []);
volkswagenApp.controller('VolkswagenCtrl', ['$http', '$rootScope', function ($http, $rootScope) {
var vw = this;
vw.gegevens = [];
$http.get('autos.json').success(function (data) {
vw.gegevens = data;
});
$rootScope.VolksWagenAppScope = vw;
}]);
volkswagenApp.controller('FormController', ['$rootScope', function ($rootScope) {
this.gegevens = {};
//var vw = this;
// vw.gegevens = [];
/* this.addGegevens = function(gegeven) {
gegeven.gegevens.push(this.gegeven);
this.gegevens={};
}*/
this.addGegevens = function (gegeven) {
debugger;
this.gegevens.datum = Date.now();
$rootScope.VolksWagenAppScope.gegevens.push(this.gegevens);
this.gegevens = {};
}
}]);
It's normal.
In your second controller (FormController), there is no vw var declared.
You can add it as you did in the first controller :
var vw = this
Ideal way will be using a `factory' to store the results, and use that factory share data between two controller.
volkswagenApp
.factory('gegavensFactory', function() {
var _gegevens = [];
return {
init: function(gagaves) {
_gegavens = gegavens;
},
add: function(gegaven) {
_gegavens.push(gegaven);
}
}
)}
volkswagenApp
.controller('VolkswagenCtrl',
['$http', 'gegavensFactory' , function($http, gegavensFactory){
$http.get('autos.json').success(function(data){
gegavensFactory.init(data);
});
}]);
volkswagenApp
.controller('FormController',['gegavensFactory', function(gegavensFactory){
this.gegevens={};
this.addGegevens = function(gegeven){
this.gegevens.datum = Date.now();
gegavensFactory.add(this.gegeven);
this.gegeven = {};
}
}]);
I am referring to this code on form posting as coresponding to angular documentation on simple form.
What is the use of angular.copy over here? it seems that the code still working fine in the case where angular.copy being removed.
<div ng-controller="ExampleController">
<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 />
<input type="button" ng-click="reset()" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
<pre>user = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
<script>
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}]);
</script>
angular.copy() to make a deep copy of the contact object. The reason for this is that user is being overwritten ( you can see by using debugger point ).
As can be read here angular.copy() performs a deep copy (cf. "clone") of the argument - essentially creating a new object - whereas using the assignment operator = just assigns reference's.
Thus in the latter case, if you we're to change something in $scope.master you would also change context.
I am trying to make a reset button for my cost estimator I am building using Ionic Framework. Now I have a simple reset from when It was a web app but obviously that does not work with Ionic.
I know i have to use Angular and add a controller etc but I am a rookie when it comes to Angular/Ionic and need some help.
Here is my code for current reset
HTML:
<div><button class="button button-block button-stable" id="resBtn" value="Reset">Reset</button></div>
JS:
//Reset Button//
document.forms[0].addEventListener('reset', function() {
document.getElementById('result').innerHTML = '';
document.getElementById('container').innerHTML = '';
document.getElementById('resultPrem').innerHTML = '';
document.getElementById('containerPrem').innerHTML = '';
});
It is resetting this:
<div id="priceBlock">
<h2 class="preText" > Standard = <span id="price"></span></h2>
<h3 id="container"> </h3>
<h2 class="preText">Express = <span id="pricePrem" ></span></h2>
<h3 id="containerPrem"> </h3>
I know i will have to add something like: ng(refresh) to the button then write a .controller in the app.js but could really do with some advice how to do this.
Any help would be greatly appreciated.
Cheers
Fred
You can refer angular docs
angular form guide
<div ng-controller="ExampleController">
<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 />
<input type="button" ng-click="reset()" value="Reset" />
<input type="submit" ng-click="update(user)" value="Save" />
</form>
<pre>user = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
<script>
angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}]);
</script>
note:snippent from guide
I am new to Angularjs. I learned some basic concepts and I started developing a form. According to my requirements, I have to give 4 textboxes and if user wants wants more he adds another 4 textboxes. Meanwhile, I am unable to track the entered details.
// create angular app
var validationApp = angular.module('validationApp','');
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.showChoiceLabel = function (choice) {
return choice.id === $scope.choices[0].id;
};
$scope.removeChoice = function() {
if($scope.choices.length>1){
var newItemNo = $scope.choices.length-1;
$scope.choices.pop();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Family Details</label>
<input type="text" ng-model="choice.name" name="id.family_name" class="form-control" placeholder="Enter Family Memeber Name" size="20">
<input type="text" ng-model="choice.relation" name="id.family_relation" class="form-control" placeholder="Enter Relation" size="15">
<input type="text" ng-model="choice.age" name="id.family_age" class="form-control" placeholder="Enter Age" size="5">
<input type="text" ng-model="choice.qualification" name="id.family_qualification" class="form-control" placeholder="Enter Qualification" size="15">
<br/><button ng-show="$last" ng-click="addNewChoice()" class="btn btn-success">Add another member</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn btn-danger">Remove field</button>
</div>
</div>
You have had an error in your initialisation of your app. The empty array in angular.module('validationApp', []). This array is the list of modules myApp depends on:
var validationApp = angular.module('validationApp',[]);
Further information in the docs.
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length + 1;
$scope.choices.push({id:'choice' + newItemNo});
};
$scope.showChoiceLabel = function(choice) {
return choice.id === $scope.choices[0].id;
};
$scope.removeChoice = function() {
if($scope.choices.length > 1) {
var newItemNo = $scope.choices.length - 1;
$scope.choices.pop();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="validationApp" ng-controller="mainController">
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Family Details</label>
<input type="text" ng-model="choice.name" name="id.family_name" class="form-control" placeholder="Enter Family Memeber Name" size="20">
<input type="text" ng-model="choice.relation" name="id.family_relation" class="form-control" placeholder="Enter Relation" size="15">
<input type="text" ng-model="choice.age" name="id.family_age" class="form-control" placeholder="Enter Age" size="5">
<input type="text" ng-model="choice.qualification" name="id.family_qualification" class="form-control" placeholder="Enter Qualification" size="15">
<br/><button ng-show="$last" ng-click="addNewChoice()" class="btn btn-success">Add another member</button>
<button ng-show="$last" ng-click="removeChoice()" class="btn btn-danger">Remove field</button>
</div>
</div>