Question

我是angularjs的新手，我需要创建动态列列跨度= 3

 <tr> 
<td colspan = 3>UPS</td> 
</tr> 
<tr> 
<td>Time_of_Reading</td>
 <td>Lastreading</td> 
<td>Readingby</td> 
</tr>

根据应该动态生成的数据进行循环仅相同

数据就是这个

[
  {
    "InvDetails": "UPS",
    "LstRecords": [
      {
        "Id": 1,
        "Invertor_Id": 1,
        "Time_of_Reading": "20170214",
        "Lastreading": 0,
        "Readingby": 0
      },
      {
        "Id": 87,
        "Invertor_Id": 1,
        "Time_of_Reading": "20170215",
        "Lastreading": 5,
        "Readingby": 10
      },
      {
        "Id": 110,
        "Invertor_Id": 1,
        "Time_of_Reading": "20170216",
        "Lastreading": 10,
        "Readingby": 92
      },
      {
        "Id": 111,
        "Invertor_Id": 1,
        "Time_of_Reading": "20170216",
        "Lastreading": 92,
        "Readingby": 95
      }
    ]
  },
  {
    "InvDetails": "Power Supply",
    "LstRecords": [
      {
        "Id": 2,
        "Invertor_Id": 2,
        "Time_of_Reading": "20170214",
        "Lastreading": 0,
        "Readingby": 0
      },
      {
        "Id": 88,
        "Invertor_Id": 2,
        "Time_of_Reading": "20170215",
        "Lastreading": 7,
        "Readingby": 13
      },
      {
        "Id": 109,
        "Invertor_Id": 2,
        "Time_of_Reading": "20170216",
        "Lastreading": 13,
        "Readingby": 25
      },
      {
        "Id": 112,
        "Invertor_Id": 2,
        "Time_of_Reading": "20170216",
        "Lastreading": 25,
        "Readingby": 49
      }
    ]
  }
]

请帮助我一些人如何创建动态colmns和如何将这个绑定到angularjs

Answer 1

您可以使用ng-repeat并在tbody上启动该循环，然后像这样深入json数组

<table>
    <tbody ng-repeat="details in yourArray">
        <tr>
            <td colspan = 3>{{details.InvDetails}}</td>
        </tr>
        <tr ng-repeat="reads in details.LstRecords">
            <td>{{reads.Time_of_Reading}}</td>
            <td>{{reads.Lastreading}}</td>
            <td>{{reads.Readingby}}</td>
        </tr>
    </tbody>
</table>

在此处查看结果Plunker

Answer 2

  <!DOCTYPE html>
  <html>
  <script src="angular.min.js"></script>
  <body>

  <div ng-app="myApp" ng-controller="customersCtrl"> 

   <table border="10">
    <tr  ng-repeat="detail in data">
     <td>{{detail.sno}}</td>
     <td>{{detail.PKN}}</td>
     <td>{{detail.PKV}}</td>
     <td ng-repeat-start="item in detail.list">[[{{item.SCN}}</td>
     <td>:{{item.SCV}}</td>
     <td>:{{item.TCN}}</td>
     <td ng-repeat-end>{{item.TCV}}]]</td>
    </tr>
   </table>

  </div>

  <script>
  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http) {
   $scope.data=[{
    "sno": "1",
    "PKN": "ID",
    "PKV": "101",
    "list": [{
            "SCN": "NAME",
            "SCV": "JYOTI",
            "TCN": "NAME",
            "TCV": "RACHKONDA"
        },
        {
            "SCN": "NAME",
            "SCV": "JYOTI1",
            "TCN": "NAME",
            "TCV": "RACHKONDA1"
        },
        {
            "SCN": "NAME",
            "SCV": "JYOTI2",
            "TCN": "NAME",
            "TCV": "RACHKONDA2"
        }
    ]
 }, {
    "sno": "2",
    "PKN": "ID",
    "PKV": "102",
    "list": [{
            "SCN": "ADDRESS",
            "SCV": "HYD",
            "TCN": "ADDRESS",
            "TCV": "SEC"
        },
        {
            "SCN": "ADDRESS",
            "SCV": "HYD3",
            "TCN": "ADDRESS",
            "TCV": "SEC2"
        },
        {
            "SCN": "ADDRESS",
            "SCV": "HYD4",
            "TCN": "ADDRESS",
            "TCV": "SEC4"
        }
    ]
 }]
 });
 </script>

 </body>
 </html>

如何在angularjs中创建动态列表以及如何绑定

2 个答案: