如何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創建動態列表以及如何綁定

回答

相關問題