使用下面的JSON更新HTML表

Question

是否有人可以查看提到的Plunker代码并帮助修改以满足预期的表。

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"
                  }
                }
              }
            ]
          }
        }
      }
    }
  }
}

角JS

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

实际表我正在使用上面的AngularJS

这是我尝试过的

期望的HTML表

使用Plunker进行演示

Answer 1

我只是更改了ng-repeat的显示位置，以实现预期的输出。

这是更新后的活塞。

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