使用JSON数据的Angularjs表 [英] Angularjs Table using JSON data

查看:140
本文介绍了使用JSON数据的Angularjs表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的两个JSON数组是 $ b

  $ 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}
]
},{
姓名:pro2,
医院:[
{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

name:pro5,
hospital:[
{id:1,价格:2201},
{id:2,price:2202},
{id:4,price:2204 }
]
}]
}
];

通过这些,我想要一个像这样的表 p>

我尝试了ng-repeat直到现在我设法在 plnkr
现在,我通过匹配医院ID来坚持 null 值的逻辑。在JSON中手动插入 null 值不适用于我,因为我从后端获取此JSON。但是我可以让他们在需要时更改JSON结构(数组的格式)。

您可以在接收后更改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;
});

现在您的医院数组值较低,看起来像下面的样子。如果你注意到,我将结构从对象数组改为一个字符串数组,其键值代表医院号。

 医院:[
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> <! - 可选 - >
< / td>
< / tr>



DEMO


My two JSON arrays are,

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

another one is

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

BY these I want a table like this

I tried it by ng-repeat till now I manage to generate the table here in plnkr Now I stuck on the logic of null values by matching the hospital id. Inserting null values manually in JSON will not work for me because I am getting this JSON from backend. But I can ask them to change JSON structure(format of array) if needed.

解决方案

You can change the JSON structure after receiving it in order to make it renderable on UI. Something like this,

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

Now your hospital array that has lesser values would look like following. If you notice, I changed the structure from array of objects to an array of strings having prices with keys denoting the hospital number..

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

Finally, you can have your rendering logic like following for embracing this change,

<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

这篇关于使用JSON数据的Angularjs表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆