我有一个很大的json对象就是它的一部分：
{
"web_app":{
"main":[
{
"Description_title":"Cuubez API Description",
"Description":"Use virtual networking services among devices that are managed by the OpenStack Compute service. The Networking (neutron) API v2.0 combines the API v1.1 functionality with some essential Internet Protocol Address Management (IPAM) functionality."
}
],
"head":[
{
"class_server":"employee resource",
"title":"cuubez example employee"
}
],
"methode_server":{
"get_group":[
{
"name":"employees",
"description":"get all the empldoyee from the repository",
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"success response"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:Employee",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"empId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
]
}
],
"post_single":[
{
"name":"employees",
"description":"get all the employee from the repository",
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"success response"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:Employee",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"empId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
]
}
],
"get_single":[
{
"name":"employees/{empId}",
"description":"get single employee from the repository",
"request":[
{
"parameter":"(QP)empId",
"type":"string",
"description":"employee identity"
},
{
"parameter":"(HP)org_Id",
"type":"string",
"description":"organization identity"
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no employee found"
}
]
}
],
"delete_single":[
{
"name":"employees/{empId}",
"description":"delete single employee from the repository",
"request":[
{
"parameter":"(PP)empId",
"type":"string",
"description":"employee identity"
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no employee found"
}
]
}
],
"put_single":[
{
"name":"employees/{empId}",
"description":"update single employee",
"request":[
{
"parameter":"(PP)empId",
"type":"string",
"description":"employee identity"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:Employee",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"empId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no employee found"
}
]
}
]
}
},
"client_app":{
"methode_client":{
"head":[
{
"class_client":"User resource",
"title":"/users"
}
],
"post_single_user":[
{
"name":"users",
"description":"Add new user to repository",
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"success response"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:Employee",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"empId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
]
}
],
"delete_single_user":[
{
"name":"users/{userId}",
"description":"delete single user from the repository ",
"request":[
{
"parameter":"(PP)userId",
"type":"string",
"description":"user identity"
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no employee found"
}
]
}
],
"put_single_user":[
{
"name":"users/{userId}",
"description":"update single user",
"request":[
{
"parameter":"(PP)userId",
"type":"string",
"description":"user identity"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:User",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"userId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no user found"
}
]
}
],
"get_users":[
{
"name":"users",
"description":"get all the users from the repository",
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"success response"
}
],
"body":[
{
"type":"object",
"id":"urn:jsonschema:com:cuubez:example:entity:User",
"properties":{
"address":{
"type":"string"
},
"department":{
"type":"string"
},
"name":{
"type":"string"
},
"userId":{
"type":"string"
},
"telNo":{
"type":"string"
}
}
}
]
}
],
"get_single_user":[
{
"name":"users/{userId}",
"description":"get single user from the repository",
"request":[
{
"parameter":"(PP)userId",
"type":"string",
"description":"user identity"
}
],
"response":[
{
"code":"500",
"reason":"internal server error"
},
{
"code":"200",
"reason":"succes response"
},
{
"code":"400",
"reason":"no user found"
}
]
}
]
}
}
}
我想使用AngularJS中的键来打印此对象的每个部分。这是我的角度代码的一部分。首先，我使用以下代码段将此数据设置为html隐藏文本框：
nativeObject = YAML.parse(editor.getValue());
var outstr = nativeObject.toString();
var out = JSON.stringify(nativeObject);
$('#jsoncode').val(out);
$('#jsoncode').trigger('input');
我使用以下代码将此数据设置为角度变量：
var app = angular.module('myApp', []);
app.controller('jsonCtrl', function($scope) {
$scope.myData = "";
});
我已将此对象字符串化并发送，但在AngularJS中我可以打印整个JSON对象，但我无法按键访问元素。以下是我的角度代码的一部分。
<div id="documentation" class="col-md-6">
<div ng-controller="jsonCtrl" class="col-md-12">
<form name="myForm">
<input id="jsoncode" type="text" name="input" ng-model="myData" />
<table border="0">
<tr ng-repeat="data in myData.web_app.main">
<div class="page-header">
<td>
<h1> {{data.Description_title}}</h1>
</td>
<td>
<h1> {{data.Description_title}}</h1>
</td>
</div>
</tr>
<tr ng-repeat="data in myData.web_app.main">
<div class="page-header">
<td>
<h3>{{data.Description}}</h3>
</td>
</div>
</tr>
</table>
<div class="panel panel-default">
<div class="panel-heading clickable">
<h3 class="panel-title">
<table border="0">
<tr ng-repeat="data in myData.web_app.head">
<td>
<h4> {{data.title}}</h4>
</td>
<td>{{data.class_server}}</td>
</tr>
</table>
</h3>
</div>
</div>
<!--
<tr ng-repeat="data in myData.web_app">
<td><h4> {{data.Description_title}} </h4></td>
<td>{{data.Description}}</td>
</tr>
为什么这个角度代码不起作用？如何在HTML文档中打印这些元素？
答案 0 :(得分：1)
如果我理解正确，您还希望在myData字段中显示input？如果是这种情况，您可以尝试：
var myApp = angular.module('myApp', []);
angular.module('myApp').directive('jsonInput', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ngModel) {
function into(input) {return JSON.parse(input);}
function out(data) {return JSON.stringify(data);}
ngModel.$parsers.push(into);
ngModel.$formatters.push(out);
}
};
});
function jsonCtrl($scope) {
$scope.myData = {
"web_app": {
"main": [{
"Description_title": "Cuubez API Description",
"Description": "Use virtual networking services among devices that are managed by the OpenStack Compute service. The Networking (neutron) API v2.0 combines the API v1.1 functionality with some essential Internet Protocol Address Management (IPAM) functionality."
}],
"head": [{
"class_server": "employee resource",
"title": "cuubez example employee"
}],
"methode_server": {
"get_group": [{
"name": "employees",
"description": "get all the empldoyee from the repository",
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "success response"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:Employee",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"empId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}]
}],
"post_single": [{
"name": "employees",
"description": "get all the employee from the repository",
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "success response"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:Employee",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"empId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}]
}],
"get_single": [{
"name": "employees/{empId}",
"description": "get single employee from the repository",
"request": [{
"parameter": "(QP)empId",
"type": "string",
"description": "employee identity"
}, {
"parameter": "(HP)org_Id",
"type": "string",
"description": "organization identity"
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no employee found"
}]
}],
"delete_single": [{
"name": "employees/{empId}",
"description": "delete single employee from the repository",
"request": [{
"parameter": "(PP)empId",
"type": "string",
"description": "employee identity"
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no employee found"
}]
}],
"put_single": [{
"name": "employees/{empId}",
"description": "update single employee",
"request": [{
"parameter": "(PP)empId",
"type": "string",
"description": "employee identity"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:Employee",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"empId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no employee found"
}]
}]
}
},
"client_app": {
"methode_client": {
"head": [{
"class_client": "User resource",
"title": "/users"
}],
"post_single_user": [{
"name": "users",
"description": "Add new user to repository",
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "success response"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:Employee",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"empId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}]
}],
"delete_single_user": [{
"name": "users/{userId}",
"description": "delete single user from the repository ",
"request": [{
"parameter": "(PP)userId",
"type": "string",
"description": "user identity"
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no employee found"
}]
}],
"put_single_user": [{
"name": "users/{userId}",
"description": "update single user",
"request": [{
"parameter": "(PP)userId",
"type": "string",
"description": "user identity"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:User",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"userId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no user found"
}]
}],
"get_users": [{
"name": "users",
"description": "get all the users from the repository",
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "success response"
}],
"body": [{
"type": "object",
"id": "urn:jsonschema:com:cuubez:example:entity:User",
"properties": {
"address": {
"type": "string"
},
"department": {
"type": "string"
},
"name": {
"type": "string"
},
"userId": {
"type": "string"
},
"telNo": {
"type": "string"
}
}
}]
}],
"get_single_user": [{
"name": "users/{userId}",
"description": "get single user from the repository",
"request": [{
"parameter": "(PP)userId",
"type": "string",
"description": "user identity"
}],
"response": [{
"code": "500",
"reason": "internal server error"
}, {
"code": "200",
"reason": "succes response"
}, {
"code": "400",
"reason": "no user found"
}]
}]
}
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body ng-app="myApp">
<div id="documentation" class="col-md-6">
<div ng-controller="jsonCtrl" class="col-md-12">
<form name="myForm">
<input json-input id="jsoncode" type="text" name="input" ng-model="myData" />
<table border="0">
<tr ng-repeat="data in myData.web_app.main">
<div class="page-header">
<td>
<h1> {{data.Description_title}}</h1>
</td>
<td>
<h1> {{data.Description_title}}</h1>
</td>
</div>
</tr>
<tr ng-repeat="data in myData.web_app.main">
<div class="page-header">
<td>
<h3>{{data.Description}}</h3>
</td>
</div>
</tr>
</table>
<div class="panel panel-default">
<div class="panel-heading clickable">
<h3 class="panel-title">
<table border="0">
<tr ng-repeat="data in myData.web_app.head">
<td>
<h4> {{data.title}}</h4>
</td>
<td>{{data.class_server}}</td>
</tr>
</table>
</h3>
</div>
</div>
<!--
<tr ng-repeat="data in myData.web_app">
<td><h4> {{data.Description_title}} </h4></td>
<td>{{data.Description}}</td>
</tr> -->
</body>