使用 angularjs 将数据附加到 json-ld答案

【问题标题】：appending data to json-ld using angularjs使用 angularjs 将数据附加到 json-ld
【发布时间】：2015-05-12 01:57:51
【问题描述】：

我是 angularjs 的新手，我开始该项目以了解有关此框架的更多信息。我制作了一个将数据放入 json-ld 的应用程序。我的应用程序可以将数据添加到 json-ld 但没有我想要的输出格式，这个：>.this is my html和角度文件：

<!DOCTYPE HTML>
<html>
  <head>
    <title>
      reelyActive: Angular Test 
    </title>
	
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js">
    </script>
    <script type="text/javascript" src="watch.js">
    </script>
	<link rel="stylesheet" href="style.css" />
  </head>
  <body ng-app="watch">
  <ul>
<li><a href="product.html">Product</a></li>
<li><a href="place.html">Place</a></li>

</ul><br/><br/>
    <div ng-controller="ctrl">
      <form>
        GivenName:  
        <input type="text" ng-model="volatile.givenName">
        <br/>
        FamilyName:	
        <input type="text" ng-model="volatile.familyName">
        <br/>
        Gender: 
        <input type="text" ng-model="volatile.gender">
        <br/>
        Nationality:
        <input type="text" ng-model="volatile.nationality">
        <br/>
        WorksFor: 
        <input type="text" ng-model="volatile.worksFor">
        <br/>
        JobTitle:
        <input type="text" ng-model="volatile.jobTitle">
        <br/>
        Url: 
        <input type="text" ng-model="volatile.url">
        <br/>
        Image:
        <input type="text" ng-model="volatile.image">
        <br/>
         </form>
         <h1>
           Your JSON
         </h1>
         <p>
           {{output}} 
         </p>
    </div>
	
	
	
	
  </body>
</html>

angular.module("watch", [])

.controller("ctrl", function($scope) {
    $scope.output = {
            "@context": {
            "schema": "http://schema.org/"
			},
           "@graph": [{
            "@id": "person",
			"@type": "schema:Person",
			}
			]
	
    }


    $scope.volatile = {};
    $scope.output["@graph"][0]["schema:givenName"] = "";
	
	
    $scope.$watch(function(scope) {
            return scope.volatile
	
        },
		function(newValue, oldValue) {
          $scope.output = newValue;
		     
			
		
        });
		
})

例如，如果用户在 givenName 表单中输入内容，它会出现在我的 json-ld 的 @graph 部分中，如下所示：>。我知道我的解释不是很清楚，如果我可以有一个潜在解决方案的演示，它将对我有很大帮助

【问题讨论】：

标签： javascript angularjs html web

【解决方案1】：

我认为这就是您要寻找的。 Fiddle

我在您的代码中所做的更改：

我使用ng-change 而不是$watch。它们之间的区别：Reference
我创建了一个changeKeyValue 方法来从$scope.volatile 中提取键值，并在input 发生任何更改时将其附加到您的@graph p>
```
for (var key in $scope.volatile) {

    if ($scope.volatile.hasOwnProperty(key)) {
        $scope.output["@graph"][0]["schema:" + key] = $scope.volatile[key];
    }
}
```
基本上它只是遍历对象，提取 key-value 并将其附加到您的 output。希望对您有所帮助。

【讨论】：