Json 到 HTML Table 使用 AngularJS Ng-repeat 转换

Question

任何人都可以使用 Angular JS Ng-Repeat 帮助我为 JSON 提出 HTML table（请参阅 HTML table 格式如下)

假设 Angular JS 从文件中获取 JSON 并且对象将是 PersonEvents

所以我将在 AngulaJS 视图的 PersonEvents 中使用列表

JSON

{
  "PersonEvent": {
    "Body": {
      "Persons": {
        "CurrentPersons": {
          "Service": [
            {
              "-PersonID": "TS029",
              "PersonChangeActivity": "NoChange",
              "Define": {
                "PersonPCProduct": {
                  "-pn": "8000065"
                }
              }
            },
            {
              "-PersonID": "TS023",
              "PersonChangeActivity": "NoChange",
              "Define": {
                "PersonPCProduct": {
                  "-pn": "8000005",
                  "Business": "Voice"
                }
              }
            }
          ]
        },
        "PersonChanges": {
          "PersonInstalls": {
            "Service": [
              {
                "-PersonID": "OT446",
                "PersonChangeActivity": "Install",
                "Define": {
                  "PersonPCProduct": {
                    "-pn": "2411",
                    "Business": "Video"
                  }
                }
              },
              {
                "-PersonID": "VD034",
                "PersonChangeActivity": "Install",
                "Define": {
                  "PersonPCProduct": {
                    "-pn": "2552",
                    "Business": "Video"
                  }
                }
              }
            ]
          },
          "PersonDisconnects": {
            "Service": [
              {
                "-PersonID": "VD034",
                "PersonChangeActivity": "Disconnect",
                "Define": {
                  "PersonPCProduct": {
                    "-pn": "2552",
                    "Business": "Video"
                  }
                }
              },
              {
                "-PersonID": "VP087",
                "PersonChangeActivity": "Disconnect",
                "Define": {
                  "PersonPCProduct": {
                    "-pn": "10400024",
                    "Business": "Video"
                  }
                }
              }
            ]
          }
        }
      }
    }
  }
}

预计HTMLTable

<table>
  <tr>
    <th>Current Persons<br></th>
    <th>PersonInstalls</th>
    <th>PersonDisconnects</th>
  </tr>
  <tr>
    <td>TS029,NoChange,8000065<br>TS023,NoChange,8000005</td>
    <td>OT446,Install,2411<br>VD034,Install,2552</td>
    <td>VD034,Disconnect,2552<br>VP087,Disconnect,10400024</td>
  </tr>
</table>

Answer 1

你可以做到，

<tr ng-repeat="x in names">                  
              <td ng-repeat="item in x.CurrentPersons.Service">
                 {{item["-PersonID"]}}, {{item.PersonChangeActivity}} <br>
                </td>
                <td ng-repeat="name in x.PersonChanges.PersonInstalls.Service">
                 {{name["-PersonID"]}},{{name.PersonChangeActivity}},{{name.Define.PersonPCProduct["-pn"]}} <br>
                </td>
                 <td ng-repeat="disconnect in x.PersonChanges.PersonDisconnects.Service">
                 {{disconnect["-PersonID"]}},{{disconnect.PersonChangeActivity}},{{disconnect.Define.PersonPCProduct["-pn"]}} <br>
                </td>
            </tr>

DEMO

Json 到 HTML Table 使用 AngularJS Ng-repeat 转换

Json to HTML Table Convert using AngularJS Ng-repeat

json

html-table

angularjs

ng-repeat