HTML表使用ng-repeat动态生成列

时间：2016-11-29 13:42:42

标签： javascript html angularjs angularjs-ng-repeat html-table

您可以通过使用带有Angular ng-repeat的JSON数据来帮助我生成HTML表。

Demo

JSON数据 

{
  "account": {
    "accountId": "54545",
    "premise": {
      "address": {
        "address1": "1800 Bishop Gate Boulevard",
        "address2": "Apartment 129",
        "city": "Mount Laurel",
        "province": "NJ",
        "postalCode": "08054",
        "country": "US",
        "direction": null,
        "externalReference": null,
        "verified": false
      },
      "timeZone": "US_EASTERN",
      "locale": "EN",
      "camera": [
        {
          "id": "175277.2",
          "name": "camera1",
          "macAddress": "00:0E:8F:5B:AB:88",
          "manufacturer": "gabreal",
          "model": "iCamera",
          "serialNumber": "000E8F5BAB88",
          "firmwareVersion": "3.0.01.07",
          "hardwareVersion": null
        },
        {
          "id": "175277.3",
          "name": "camera2",
          "macAddress": "D4:21:22:D9:D0:73",
          "manufacturer": "gabreal",
          "model": "iCamera2-C",
          "serialNumber": "D42122D9D073",
          "firmwareVersion": "3.0.02.39",
          "hardwareVersion": null
        },
        {
          "id": "175277.1",
          "name": "camera3",
          "macAddress": "00:0E:8F:95:A8:A6",
          "manufacturer": "gabreal",
          "model": "SerComm_Camera_8021",
          "serialNumber": "000E8F95A8A6",
          "firmwareVersion": "1.0.24",
          "hardwareVersion": null
        }
      ],
      "thermostat": [
        {
          "id": "0024460000084172.10",
          "name": "Thermostat1",
          "type": "THERMOSTAT",
          "manufacturer": "RTCOA",
          "serialNumber": null,
          "firmwareVersion": "0x00000587",
          "hardwareVersion": "192",
          "model": "CT30S"
        },
        {
          "id": "000d6f0003ec6669.1",
          "name": "Thermostat2",
          "type": "THERMOSTAT",
          "manufacturer": "CentraLite Systems",
          "serialNumber": null,
          "firmwareVersion": "0x1418468c",
          "hardwareVersion": "2",
          "model": "3156105"
        }
      ],
      "zone": [
        {
          "id": 1,
          "name": "one",
          "type": "DOOR",
          "functionType": "ENTRY_EXIT",
          "sensor": [
            {
              "id": 1,
              "type": "DRY_CONTACT",
              "sourceType": "ZIGBEE",
              "serialNumber": "000d6f00030cdbcf.1",
              "model": "MCT-320 SMA",
              "manufacturer": "Visonic",
              "firmwareVersion": "0x00040008",
              "hardwareVersion": "1"
            }
          ]
        },
        {
          "id": 2,
          "name": "Motion",
          "type": "MOTION",
          "functionType": "INTERIOR_FOLLOWER",
          "sensor": [
            {
              "id": 2,
              "type": "MOTION",
              "sourceType": "ZIGBEE",
              "serialNumber": "000d6f0004b2af93.1",
              "model": "NEXT K85 SMA",
              "manufacturer": "Visonic",
              "firmwareVersion": "0x0004000b",
              "hardwareVersion": "1"
            }
          ]
        }
      ],
      "cpe": {
        "cpeId": "9c972684b2ca",
        "name": null,
        "deploymentModel": "WIFI_CLIENT_PSK_2_MODE",
        "serialNumber": null,
        "manufacturer": "Technicolor",
        "model": "TCA203",
        "hardwareRev": "5",
        "passPhrase": "528233",
        "cellularProfileName": null,
        "imeiNumber": 359942045924230,
        "iccId": "89011703258034552401",
        "simCardPhoneNumber": null,
        "simCardAccountNumber": null,
        "wifiMacAddress": "70:25:59:79:E2:EE",
        "firmwareVersion": "7_3_8_050000_201611152386",
        "widget": [
          {
            "name": "com.wsi.android.Gabreal",
            "version": "1.2"
          },
          {
            "name": "com.icontrol.apps.clock",
            "version": "1.0.0.0.3"
          }
        ],
        "module": []
      },
      "premiseId": null
    },
    "source": "INTERNAL"
  }
}

我想要生成的表格如下 

<table>
  <tr>
    <th>Property<br></th>
    <th>camera</th>
    <th>camera</th>
    <th>camera</th>
    <th>thermostat</th>
    <th>thermostat</th>
    <th>sensor</th>
    <th>sensor</th>
  </tr>
  <tr>
    <td>id</td>
    <td>175277.2</td>
    <td>175277.3</td>
    <td>175277.1</td>
    <td>0024460000084172.10</td>
    <td>000d6f0003ec6669.1</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>name</td>
    <td>camera1</td>
    <td>camera2</td>
    <td>camera3</td>
    <td>Thermostat1</td>
    <td>Thermostat2</td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>macAddress</td>
    <td>00:0E:8F:5B:AB:88</td>
    <td>D4:21:22:D9:D0:73</td>
    <td>00:0E:8F:95:A8:A6</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>manufacturer</td>
    <td>gabreal</td>
    <td>gabreal</td>
    <td>gabreal</td>
    <td>RTCOA</td>
    <td>CentraLite Systems</td>
    <td>Visonic</td>
    <td>Visonic</td>
  </tr>
</table>

注意： Aruna已经回答了这个问题，但是当区域对象之类的不同类型的JSON对象与其他类型不同时，它会失败。

1 个答案:

答案 0 :(得分：3)

这是一个包含对象和属性的generic解决方案。

根据Bounty请求的json更改进行了更新。

＆＃13;
＆＃13; 
var app = angular.module('studentApp', []);

app.controller('StudentCntrl', function($scope,$http) {
    //$http.get('data.json').then(function (response){
	              //console.log(response.data.pages);
                //$scope.deviceInfo = response.data.account.premise;
        //});
  
var responseData = {
  "account": {
    "accountId": "54545",
    "premise": {
      "address": {
        "address1": "1800 Bishop Gate Boulevard",
        "address2": "Apartment 129",
        "city": "Mount Laurel",
        "province": "NJ",
        "postalCode": "08054",
        "country": "US",
        "direction": null,
        "externalReference": null,
        "verified": false
      },
      "timeZone": "US_EASTERN",
      "locale": "EN",
      "camera": [
        {
          "id": "175277.2",
          "name": "camera1",
          "macAddress": "00:0E:8F:5B:AB:88",
          "manufacturer": "gabreal",
          "model": "iCamera",
          "serialNumber": "000E8F5BAB88",
          "firmwareVersion": "3.0.01.07",
          "hardwareVersion": null
        },
        {
          "id": "175277.3",
          "name": "camera2",
          "macAddress": "D4:21:22:D9:D0:73",
          "manufacturer": "gabreal",
          "model": "iCamera2-C",
          "serialNumber": "D42122D9D073",
          "firmwareVersion": "3.0.02.39",
          "hardwareVersion": null
        },
        {
          "id": "175277.1",
          "name": "camera3",
          "macAddress": "00:0E:8F:95:A8:A6",
          "manufacturer": "gabreal",
          "model": "SerComm_Camera_8021",
          "serialNumber": "000E8F95A8A6",
          "firmwareVersion": "1.0.24",
          "hardwareVersion": null
        }
      ],
      "thermostat": [
        {
          "id": "0024460000084172.10",
          "name": "Thermostat1",
          "type": "THERMOSTAT",
          "manufacturer": "RTCOA",
          "serialNumber": null,
          "firmwareVersion": "0x00000587",
          "hardwareVersion": "192",
          "model": "CT30S"
        },
        {
          "id": "000d6f0003ec6669.1",
          "name": "Thermostat2",
          "type": "THERMOSTAT",
          "manufacturer": "CentraLite Systems",
          "serialNumber": null,
          "firmwareVersion": "0x1418468c",
          "hardwareVersion": "2",
          "model": "3156105"
        }
      ],
      "zone": [
        {
          "id": 1,
          "name": "one",
          "type": "DOOR",
          "functionType": "ENTRY_EXIT",
          "sensor": [
            {
              "id": 1,
              "type": "DRY_CONTACT",
              "sourceType": "ZIGBEE",
              "serialNumber": "000d6f00030cdbcf.1",
              "model": "MCT-320 SMA",
              "manufacturer": "Visonic",
              "firmwareVersion": "0x00040008",
              "hardwareVersion": "1"
            }
          ]
        },
        {
          "id": 2,
          "name": "Motion",
          "type": "MOTION",
          "functionType": "INTERIOR_FOLLOWER",
          "sensor": [
            {
              "id": 2,
              "type": "MOTION",
              "sourceType": "ZIGBEE",
              "serialNumber": "000d6f0004b2af93.1",
              "model": "NEXT K85 SMA",
              "manufacturer": "Visonic",
              "firmwareVersion": "0x0004000b",
              "hardwareVersion": "1"
            }
          ]
        }
      ],
      "cpe": {
        "cpeId": "9c972684b2ca",
        "name": null,
        "deploymentModel": "WIFI_CLIENT_PSK_2_MODE",
        "serialNumber": null,
        "manufacturer": "Technicolor",
        "model": "TCA203",
        "hardwareRev": "5",
        "passPhrase": "528233",
        "cellularProfileName": null,
        "imeiNumber": 359942045924230,
        "iccId": "89011703258034552401",
        "simCardPhoneNumber": null,
        "simCardAccountNumber": null,
        "wifiMacAddress": "70:25:59:79:E2:EE",
        "firmwareVersion": "7_3_8_050000_201611152386",
        "widget": [
          {
            "name": "com.wsi.android.Gabreal",
            "version": "1.2"
          },
          {
            "name": "com.icontrol.apps.clock",
            "version": "1.0.0.0.3"
          }
        ],
        "module": []
      },
      "premiseId": null
    },
    "source": "INTERNAL"
  }
};
  
var headerProperty = $scope.headerProperty = 'deviceType';
  
rebuildDeviceInfo(responseData);
  
function rebuildDeviceInfo(data) {
  var deviceInfoData = responseData.account.premise;
  var deviceInfo = [], deviceProperties = [];
  
  // Parse devices
  angular.forEach(deviceInfoData, function(devices, deviceKey) {
    if(angular.isArray(devices)) {
       deviceInfo = deviceInfo.concat(parseDevices(devices, deviceKey));
    }
  });
  
  // Parse device properties
  for(var i = 0; i < deviceInfo.length; i++) {
    var device = deviceInfo[i];
    angular.forEach(device, function(value, deviceProperty) {
      if(deviceProperties.indexOf(deviceProperty) === -1) {
        deviceProperties.push(deviceProperty);
      }
    });
  }
  
  $scope.deviceInfo = deviceInfo;
  $scope.deviceProperties = deviceProperties;
}
  
function parseDevices(dataArray, dataKey) {
     var deviceInfo = [];
     if(angular.isArray(dataArray)) {
       for(var i = 0; i < dataArray.length; i++) {
         var data = dataArray[i];
         if(data.hasOwnProperty('manufacturer') || data.hasOwnProperty('model')) {
           data[headerProperty] = dataKey;
           deviceInfo.push(data);
         } else {
            angular.forEach(data, function(devices, deviceKey) {
              if(angular.isArray(devices)) {
                 deviceInfo = deviceInfo.concat(parseDevices(devices, deviceKey));
              }
            });
         }
       }
     }
    
     return deviceInfo;
}
  
});
＆＃13; 
<!DOCTYPE html>
<html ng-app="studentApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script  src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>

<body ng-controller="StudentCntrl">

 
    <div class="table-responsive">
        <table class="table table-striped">
          <thead>
            <tr>
              <th>Property</th>
              <th ng-repeat="device in deviceInfo track by $index">{{device[headerProperty]}}</th>
            </tr>
          </thead>
          <tbody>
             <tr ng-repeat="prop in deviceProperties track by $index" ng-if="prop != headerProperty">
                <td>{{prop}}</td>
                <td ng-repeat="device in deviceInfo track by $index">{{device[prop]}}</td>
             </tr>
          </tbody>
        </table>
      </div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题