Question

我正在尝试将输入值存储在JSON对象中并将JSON对象绑定到Span。它不起作用。直接ng-repeat工作正常，但是如果我从JSON objeci绑定它不起作用。

我的代码：

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

Answer 1

将代码移动到正文的末尾。在将span添加到DOM之前，document.getElementById("jname").innerHTML=JSONObject.name;正在执行...

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

如何在Angular JS中使用ng-model在JSON对象中存储输入值？

1 个答案: