使用 JSON 数据的 Angularjs 表

Question

我的两个 JSON 数组是，

$scope.myHospital = [
  {"id":"1","name":"hos1"}, 
  {"id":"2","name":"hos2"},
  {"id":"3","name":"hos3"},
  {"id":"4","name":"hos4"},
  {"id":"5","name":"hos5"}
];

另一个是

    $scope.data = [
        {
      "category":"first category",
      "procedure":[{
        "name":"pro1",
        "hospital": [
          {"id":"1","price":"1101"},
          {"id":"2","price":"1102"},
          {"id":"3","price":"1103"},
          {"id":"4","price":"1104"},
          {"id":"5","price":"1105"}
        ]
      }, {
        "name":"pro2",
        "hospital": [
          {"id":"1","price":"1201"},
          {"id":"2","price":"1202"},
          {"id":"3","price":"1203"},
          {"id":"4","price":"1204"},
          {"id":"5","price":"1205"}
        ]
      }, {
        "name":"pro3",
        "hospital": [
          {"id":"1","price":"1301"},
          {"id":"3","price":"1303"},
          {"id":"5","price":"1305"}
        ]
      }]
    },
    {
      "category":"Second category",
      "procedure":[{
        "name":"pro4",
        "hospital": [
          {"id":"1","price":"2101"},
          {"id":"2","price":"2102"},
          {"id":"3","price":"2103"},
          {"id":"4","price":"2104"},
          {"id":"5","price":"2105"}
        ]
      }, {
        "name":"pro5",
        "hospital": [
          {"id":"1","price":"2201"},
          {"id":"2","price":"2202"},
          {"id":"4","price":"2204"}
        ]
      }]
    }               
   ];

通过这些，我想要一张这样的桌子

我通过 ng-repeat 尝试过，直到现在我设法在plnkr 中生成表格 现在我通过匹配医院 ID 坚持null 值的逻辑。在 JSON 中手动插入 null 值对我不起作用，因为我从后端获取此 JSON。但如果需要，我可以要求他们更改 JSON 结构（数组格式）。

Answer 1

您可以在收到 JSON 结构后更改它，以使其可在 UI 上呈现。像这样的，

angular.forEach($scope.data[0].procedure, function(pro) {
  var arr = [];
  angular.forEach(pro.hospital, function(hos) {
    arr[hos.id] = hos.price
  });
  pro.hospital = arr;
});

现在，具有较小值的医院数组如下所示。如果您注意到，我将结构从对象数组更改为字符串数组，其中包含表示医院编号的键的价格。

hospital: [
  2: "469",
  3: "429",
  5: "319"
]

最后，您可以使用如下渲染逻辑来接受此更改，

<tr ng-repeat="(index, hos) in myHospital">
  <td ng-bind="hos.name"></td>
  <td ng-repeat="pro in data[0].procedure">
    <span ng-bind="pro.hospital[index+1]"></span>
    <span ng-if="!pro.hospital[index+1]">NULL</span> <!--Optional-->
  </td>
</tr>

DEMO

Answer 2

这是工作的code。

我也对您的数据源进行了一些更改，这很容易考虑和制作，在 HTML 中也是如此。

在您的 plunker 中，当 $scope.data 中的 "hospital" 对象中存在少量记录时，您显示与医院相对应的错误值。为了纠正我也添加了空对象，因此 ng-repeat 将传递正确的索引显示对比 在JS中

$scope.data = [
        {
      "category":"first category",
      "procedure":[{
          "name":"pro1",
          "hospital": [
            {"id":"1","price":"1101"},
            {"id":"2","price":"1102"},
            {"id":"3","price":"1103"},
            {"id":"4","price":"1104"},
            {"id":"5","price":"1105"}
          ]
      }, {
        "name":"pro2",
        "hospital": [
          {"id":"1","price":"1201"},
          {"id":"2","price":"1202"},
          {"id":"3","price":"1203"},
          {"id":"4","price":"1204"},
          {"id":"5","price":"1205"}
        ]
      }, {
        "name":"pro3",
        "hospital": [
          {"id":"1","price":"1301"},
           {"id":"2","price":null}, // add null objects for considering right index in display...
          {"id":"3","price":"1303"},
           {"id":"4","price":null},
          {"id":"5","price":"1305"}
        ]
      }]
    },
    {
      "category":"Second category",
      "procedure":[{
          "name":"pro4",
          "hospital": [
            {"id":"1","price":"2101"},
            {"id":"2","price":"2102"},
            {"id":"3","price":"2103"},
            {"id":"4","price":"2104"},
            {"id":"5","price":"2105"}
          ]
      }, {
        "name":"pro5",
        "hospital": [
          {"id":"1","price":"2201"},
          {"id":"2","price":"2202"},
          {"id":"3","price":null},
          {"id":"4","price":"2204"},
          {"id":"5","price":null}
        ]
      }]
    }               
   ];

在你的 HTML 中

<tr ng-repeat="(index, hos) in myHospital">
                    <td width="100px">{{hos.name}}</td>
                    <td width="100px" ng-repeat="pro in d.procedure">
                       <p ng-show="pro.hospital[index].id == index+1">{{  pro.hospital[index].price }}</p>
                       <p ng-hide="pro.hospital[index].id == index+1 && pro.hospital[index].price">NULL</p>
                    </td>
                </tr>

Answer 3

不是确切的解决方案，但可能会有所帮助..

<table border="2">
 <tbody ng-repeat="cat in data">
  <tr>
   <td>{{cat.category}}</td>
  </tr> 
  <tr ng-repeat="procedure in cat.procedure">
   <td>{{procedure.name}}</td>
   <td ng-repeat="hospital in procedure.hospital">{{hospital.price}}</td>
  </tr>
</tbody>

Answer 4

试试智能表。 https://github.com/lorenzofox3/Smart-Table

我们会在 ng-repeat 之前准备好您的数据以满足您的需求。