how to serialize div in angular on load?

Question

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

not much of an explanation. Put more effort into questions and you will get answers that fit the issues — charlietfl, Sep 10 '14 at 12:25

Kalhan.Toress · Accepted Answer · 2014-09-19T04:41:13.253

<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 dont want to give like this ` $scope.user = {firstName:'',lastName:''};` I will not know what will be the content ,Now i am using ng-init only :) — , Sep 19 '14 at 04:50

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

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

edited May 23 '17 at 10:26

Community

1
1

answered Sep 10 '14 at 11:48

o--oOoOoO--o

770
4
7

this doesn't populate the object properties – charlietfl Sep 10 '14 at 12:11
I understand now what he wants :) I updated the fiddle accordingly. – o--oOoOoO--o Sep 10 '14 at 12:17

score 0 · Answer 3 · answered Sep 10 '14 at 12:00

0

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

answered Sep 10 '14 at 12:00

Gayan

2,750
5
47
88

you can do something like this `$scope.display = angular.toJson($scope.user);` and then on the view you can just call `{{display}}` but that also you have to initialized on controller level – Gayan Sep 11 '14 at 04:08

how to serialize div in angular on load?

3 Answers3