如何在Angular JS中使用ng-model在JSON對象中存儲輸入值？

我想將輸入值存儲在JSON對象中，並將JSON對象綁定到Span。它不工作。 Direct ng-repeat正在工作，但如果我從JSON目標綁定它不工作。如何在Angular JS中使用ng-model在JSON對象中存儲輸入值？

我的代碼：

<!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>

頁眉其工作，在跨度我從JSON結合其不工作。我試圖在jsbin中使用相同的代碼。但是如果我創建自己的html，它不起作用。

幫幫我。

由於事先 Stephen.L

來源

2014-02-26 Stephen L

的jsfiddle演示將是巨大的，謝謝！ –

@FUserThrowError [Jsfiddle]（http://jsfiddle.net/876xP/） –

-1

移動你的代碼到身體的末端。 document.getElementById("jname").innerHTML=JSONObject.name;正在執行跨度添加到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

來源

2014-02-26 05:49:51

謝謝@Anthony Chu ...一個更多的幫助，我使用jsPdf轉換JSON對象爲PDF，在PDF中我沒有得到這個JSON對象。示例代碼：var doc = new jsPDF（）; doc.text（10,20，JSON.stringify（JSONObject.name））; –

它應該是'JSON.stringify（JSONObject）'？ –

如何在Angular JS中使用ng-model在JSON對象中存儲輸入值？

回答

相關問題