how to serialize div in angular on load? - javascript

I am using angular js version 1.2.
Basically i am creating object in server based on screen to do this i need to pass to server
how can i convert a 'div' onload of screen to json using angularjs?
html looks likes this:
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" />
<input ng-model="user.lastName" />
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>
{{user | json}}
</div>
js :
function MyCtrl($scope) {
$scope.user = { };
}
jsfiddele: http://jsfiddle.net/bpbhat777/2grw1je0/
i want it to be like this
http://jsfiddle.net/bpbhat777/dbg2u5ck/
without setting firstname and lastName .It need not to be firstname and lastName , in screen ng-model may be any object

<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" ng-init="user.firstName=''" />
<input ng-model="user.lastName" ng-init="user.lastName=''" />
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>
{{user | json}}
</div>
and remove $scope.user = { }; from controller
WITHOUT ng-init
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" />
<input ng-model="user.lastName"/>
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>
{{user | json}}
</div>
function MyCtrl($scope) {
$scope.user = {firstName:'',lastName:''};
}

i don't have any idea what the use of it. but if you really need that ng-init might be the option
<div id="settingsholder" ng-controller="MyCtrl">
<input ng-model="user.firstName" ng-init="user.firstName=''" />
<input ng-model="user.lastName" ng-init="user.lastName=''" />
<input type="button" ng-click="showJson()" value="Object To JSON" />
<hr/>{{user | json}}
check the demo fiddle

You are looking for angular.toJson()
https://docs.angularjs.org/api/ng/function/angular.toJson
There are several ways to update $scope on page load. I personally prefer to use init():
$scope.init = function() {
$scope.json = angular.toJson($scope.user);
}
$scope.init();
Fiddle: http://jsfiddle.net/dbg2u5ck/2/
After reading and re-reading your question, it seems to me you want to populate the $scope with pre-loaded html values (an empty string in your case). This is not the way Angular works, please take the time to read this article if you want to populate $scope with html values: Angular js init ng-model from default values

Related

angular's ng-submit() directive does not submit while pressing enter on one of text fields

I've constructed a simple form using angular.
I want that once the user enter some value and then press enter - the ng-click function (in this case updateMsg({name: name,room: room})) will be run.
However, this code does not work like that.. the function run only after pressing the button (not like I want - enter keyboard value, then enter..)
Code is below...
help please?
Thanks
<body>
<div class="Member">
<h1>Sign In</h1>
<form name="myForm" ng-submit="updateMsg({name: name,room: room})">
Please enter your details:
<br>
Name: <input name="name" ng-model="name" autocomplete="off">
<br>
Room: <input name="room" ng-model="room" autocomplete="off">
<br>
<button type="button" ng-click="updateMsg({name: name,room: room})">
Enter
</button>
</form>
</div>
</body>
You should not use ng-click and ng-submit directives together. Add type="submit" to your button like this:
<button type="submit">Enter</button>
and keep only ng-submit:
<form name="myForm" ng-submit="updateMsg({name: name,room: room})">
Please enter your details:
<br> Name:
<input name="name" ng-model="name" autocomplete="off">
<br> Room:
<input name="room" ng-model="room" autocomplete="off">
<br>
<button type="submit">Enter</button>
</form>
Also there is no point in doing ng-submit="updateMsg({name: name,room: room})" to pass your updated data like that. Since you are using ng-model you are ready to go. You can declare your scope vars initially in the controller and when the form gets submitted you can use them right away. Because of dual-binding your vars will be already updated:
angular
.module('myApp', [])
.controller('MemberController', ['$scope', function($scope) {
$scope.name = '';
$scope.room = '';
$scope.updateMsg = function() {
// use updated $scope.name in here
// use updated $scope.room too
}
}]);
A small plunker to help you some more.
I think the button should have type=submit instead.
<button type="submit">
instead of
<button type="button" ng-click="updateMsg({name: name,room: room})">Enter</button>
Are you calling a event.preventDefault() method so the form doesn't submit by default? Maybe share the code where you're creating the updateMsg({name: name,room: room}).

Dynamic ng-model for input AngularJs

I have a problem. When I use static template on render page
<form name="AddArticle" ng-submit="addArticle()" class="form add-article">
<input type="text" value="first" init-from-form ng-model="article.text[0]" />
<input type="text" value="second" init-from-form ng-model="article.text[1]" />
</form>
And when I do submit form, I get data:
{text : {0: "first", 1: "second"}}
But I have dynamic moment. By clicking I add dynamic input
$(".button").click(function(){
$('.form').append('<input ng-model="article.info" init-from-form type="text" />');
})
Ok. All appended, but by submit I still get data without dynamic input.
Tell me please, how to get all fields form???
Number one, don't mix jQuery like that when you can use angular. Try something like this:
view
<form name="AddArticle" ng-submit="addArticle()" class="form add-article">
<p ng-repeat="object in data track by $index">
<input type="text" ng-model="object.text" />
</p>
</form>
<button ng-click="addInput()">
add
</button>
{{data}}
</div>
controller
angular.module("app", [])
.controller("testCtrl", function($scope) {
$scope.data = [];
$scope.addInput = function() {
$scope.data.push({});
}
})
https://jsfiddle.net/pntd3kaf/

Get value from the input field and use it as a parameter in the function

I have a problem so I would value input from the input field as a parameter to put the delete function (insert in place X)
<input id="a" type="number" name="fname"><br>
<form action='#close' ng-controller='NoteFormController as formCtrl' ng-submit='formCtrl.delete(calCtrl.series[$index], X)'>
<div class='form-field'>
<input type='submit' value='delete value'>
</div>
</form>
Thanks in advance for your help
You typically would need to use ngModel directive to bind value from input element to scope model. For example:
<input id="a" type="number" name="fname" ng-model="fname">
<br>
<form action='#close'
ng-controller='NoteFormController as formCtrl'
ng-submit='formCtrl.delete(calCtrl.series[$index], fname)'>
<div class='form-field'>
<input type='submit' value='delete value' />
</div>
</form>
Note, above snippet assumes that you have outer controller that wraps input and form, so that fname model will be set in the parent scope relative to NoteFormController scope.
try this ....
$('#a').value();
Don't fallback to jQuery accessors. You should bind a scope variable to the input and access in the delete function or pass into the delete function.
<input id="a" type="number" name="fname" ng-model="someVariable"><br>
<form action='#close' ng-controller='NoteFormController as formCtrl' ng-submit='formCtrl.delete(calCtrl.series[$index], someVariable)'>
<div class='form-field'>
<input type='submit' value='delete value'>
</div>
in your formCtrl controller, declare:
$scope.someVariable = '';
You can also access $scope.someVariable in the delete() function in the controller:
$scope.delete = function (seriesValue) {
...= $scope.someVariable;
}

Angular js: Adding list of nested array properties

Please help: hitting my head all the way,I am a new-bee to angular js, building a Quiz Application using angular js,
I have an issue adding array of nested properties to my controller
jsfiddle link showing the issue:
STEP BY STEP SCENARIO
I want to add a question
each question has 4 options, out of which 1 is selected as right
I am able to get the UI but binding is not working for Options
html is as below:
<div ng-app>
<div class="new-question-container" ng-controller="newQuestionController">
<h3>Add New Question</h3>
<form class="new-question-form" novalidate name="newQuestionForm" data-ng-submit="save()">
<div>
<label for="QuestionDescription">Quesiton Description</label>
<input type="text" name="QuestionDescription" data-ng-model="newQuestion.QuestionDescription" required />
</div>
Options<br/>
<div ng-repeat="i in [1,2,3,4]">
<label for="options[i].OptionDescription">Option {{i}}</label>
<input name="options[i].OptionDescription" type="text" data-ng-model="options[i].OptionDescription" required />
Is right answer:
<input type="radio" data-ng-model="options[i].IsAnswer" name="newQuestion" ng-value="true" />Yes
<input type="radio" data-ng-model="options[i].IsAnswer" name="newQuestion" ng-value="false" />No
</div>
<input type="submit" class="btn btn-primary" value="Add Question" data-ng-disabled="newQuestionForm.$invalid" />
Cancel
</form>
</div>
</div>
angular script as below
function newQuestionController($http, $scope, $window) {
$scope.newQuestion = {};
$scope.options = [{}];
$scope.save = function () {
$scope.newQuestion.Options.push(options);
alert($scope.newQuestion.QuestionDescription);
}
}
You have to initialize you $scope correct like this:
$scope.options = [{},{},{},{}];
and change the ng-repeat array to start from 0:
ng-repeat="i in [0,1,2,3]"
Here you can find a working example

Angularjs updating input from another input box

Hi I have following situation
I have following html Wh
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter a number" ng-model="c.num" on-blur="test()" />
<input type="text" ng-model="c.Id" ng-init="c.Id = pId" />
</body>
On my controller I have
$scope.test=function() {
$scope.pId = $scope.num+1;
};
So that when 5 is entered in first box the second box should update 6. But it doesnt.
Please let me know how to fix it. Thanks
Here is the plunker for it
http://plnkr.co/edit/9QoMwsjUBl8CNAFgtYcj?p=preview
Working fiddle
I removed the ng-init, no need for it.
Referenced the right variable.
Changed input type to number (then no need to parseInt). Else you would get 5+1 = 51.
$scope.test=function() {
$scope.c.Id = $scope.c.num + 1;
};
Your updated plunker
Please check if the first ng-model is correct. I think you want this:
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter a number" ng-model="num" on-blur="test()" />
<input type="text" ng-model="c.Id" ng-init="c.Id = pId" />
</body>
By looking at your code, I am unsure what the object 'c' is or where it is instantiated. I also do not think you are using ng-init properly. In the documentation below, it suggests only using it in scopes that are otherwise unavailable in the angular context (e.g. ng-repeats).
What about changing your html to
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter a number" ng-model="num" ng-blur="test()" />
<input type="text" ng-model="pId" />
</body>
and keeping your javascript the same.
Edit:
Angular documentation https://docs.angularjs.org/api/ng/directive/ngInit
ng-blur is the way to go here:
markup:
<body ng-app="myApp" ng-controller="MyController">
<input type="text" placeholder="enter value" ng-model="num" ng-blur="test()" />
<input type="text" ng-model="pId" />
</body>
controller
angular.module('myApp', [])
.controller('MyController', function($scope) {
$scope.c = {};
$scope.test = function() {
$scope.pId = parseInt($scope.num) + 1;
};
});

Categories