current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

I am trying to store the input values in JSON object and binding the JSON object to Span. its not working. Direct ng-repeat is working, but if i bind it from JSON objeci its not working.

My code:

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js">    </script>
    <script type="text/javascript">
        var JSONObject = {"name":"{{yourName}}"
        };
        document.getElementById("jname").innerHTML=JSONObject.name;
    </script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
      <p>
        Name: <span id="jname"></span>
      </p>
    </div>
  </body>
</html>

In header its working, in span i am binding from JSON its not working. I tried in jsbin the same code its working.but if i create my own html its not working.

Help me.

Thanks in Advance, Stephen.L

share|improve this question
    
jsfiddle demo will be great, thanks! – Михалко Фархат Feb 26 '14 at 5:36
    
@FUserThrowError Jsfiddle – Stephen L Feb 26 '14 at 6:03
up vote -1 down vote accepted

Move your code to the end of the body. document.getElementById("jname").innerHTML=JSONObject.name; is executing before the span is added to the DOM...

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js">    </script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello {{yourName}}!</h1>
      <p>
        Name: <span id="jname"></span>
      </p>
    </div>

    <script type="text/javascript">
        var JSONObject = { "name":"{{yourName}}" };
        document.getElementById("jname").innerHTML=JSONObject.name;
    </script>
  </body>
</html>

JSBin... http://jsbin.com/qeseyibi/1/edit?html,output

share|improve this answer
    
Thanks @Anthony Chu ... One more help , I am using jsPdf to convert JSON object to PDF, in PDF i am not getting this JSON object. Example Code: var doc = new jsPDF();doc.text(10,‌​20,JSON.stringify(JSO‌​NObject.name)); – Stephen L Feb 26 '14 at 6:46
    
Should it be JSON.stringify(JSON‌​Object)? – Anthony Chu Feb 26 '14 at 6:49

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.