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

进出口新的angularjs我需要是动态创建的列其中有合并单元格= 3如何angularjs创建动态列表以及如何绑定

<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

来源

2017-02-16 Rocker

显示在网格中。 – Rocker

你可以使用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

来源

2017-02-16 11:05:04

我已经尝试过这一个，但它没有得到正确的可以让我知道的脚本也..我给了JSON数据..我可以改变根据我的网络API请 – Rocker

@摇摆请查看跳水 –

嗨谢谢回答我的问题。我需要得到列也喜欢它是出口数据在CSV格式逆变器名称应该来..如果即时通讯使用http://52.9.55.95:91/api/ExcelDetails/ExcelExportLogDetails当我的数据是我需要推动数据到这里只stucking可以请你帮我在这 – Rocker

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

来源

2017-08-18 13:35:35

请尝试解释为什么这可以解决问题。 – loki

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

回答

相关问题