角度ng重复无法正确呈现数据

I was trying to make a table from json structure but not getting it to render properly.

我试图从json结构制作一个表，但没有让它正确渲染。

Output is not shown properly for the first two cells; Partial is empty and it is filling the only last one. Please refer below image

前两个单元格未正确显示输出;部分是空的，它填补了唯一的最后一个。请参考下图

controller.js

.controller('wController', function($scope, $http) {
  console.log('i m in ctrl 3');
  $http({
    method: "GET",
    url: "http://custom.url.ch:3021/routepath",
    headers: {
      'Authorization': 'Basic Ydaeq2FwaQw1='
    }
    // headers : {"Authorization": "Basic " + auth}
  }).then(function(response) {
    console.log("yoyo", JSON.stringify(response));
    $scope.data = response.data;
  }, function(response) {
    console.log("oaapop" + JSON.stringify(response));
  });
});

// index.html

<div class="table-responsive" ng-controller="woController">
    <table class="table table-condensed" border="1">
      <thead>
        <tr>
          <th>Sites</th>
          <th ng-repeat="worstData in data">
            <center>{{$index+1}}</center>
          </th>
          <!-- <th><center>2</center></th> -->
          <!-- <th><center>3</center></th> -->
          <!-- <th><center>4</center></th> -->
          <!-- <th><center>5</center></th> -->
        </tr>
      </thead>
      <!-- <tbody> -->

      <tbody>
        <tr>
          <td> PartialSite</td>
          <td ng-repeat="worstData in data">{{$index}} {{[worstData[0][$index].PartialSite]}}</td>
        </tr>
        <tr>
          <td>FailSite</td>
          <td> </td>
          <td></td>
          <td> </td>
        </tr>
        <tr>
          <td> Jobs mn</td>
          <td> </td>
          <td></td>
          <td> </td>
        </tr>
        <tr>
          <td>Largest Points</td>
          <td> </td>
          <td></td>
          <td> </td>
        </tr>
      </tbody>
    </table>
  </div>

// JSON structure to make table structure

//建立表结构的JSON结构

{
  "data": {
    "statusCode": 200,
    "message": "Getting Data",
    "data": [
      [{
        "PartialSite": "LRS",
        "Partial": 2
      }, {
        "PartialSite": "Sooking",
        "Partial": 1
      }, {
        "PartialSite": "Late",
        "Partial": 1
      }],
      [{
        "FailSite": "Sotelia",
        "fail": 2
      }, {
        "FailSite": "Pccor",
        "fail": 1
      }, {
        "FailSite": "PccroHotels",
        "fail": 0
      }],
      [{
        "ExecSite": "Sotelia",
        "time": 240
      }, {
        "ExecSite": "Late",
        "time": 240
      }, {
        "ExecSite": "Pccor",
        "time": 120
      }],
      [{
        "DataSite": "LRS",
        "totalDP": 16
      }, {
        "DataSite": "Sooking",
        "totalDP": 14
      }, {
        "DataSite": "Pccor",
        "totalDP": 12
      }]
    ]
  },
  "status": 200,
  "config": {
    "method": "GET",
    "transformRequest": [null],
    "transformResponse": [null],
    "url": "http://custom.url.ch:3021/routepath",
    "headers": {
      "Authorization": "Basic Ydaeq2FwaQw1=",
      "Accept": "application/json, text/plain, */*"
    }
  },
  "statusText": "OK"
}

2 个解决方案

#1

Is this what you are looking for - https://plnkr.co/edit/aMYrwNPHCkGnxftZgke4?p=preview

这是你在找什么 - https://plnkr.co/edit/aMYrwNPHCkGnxftZgke4?p=preview

     <body data-ng-controller="sampleCtrl as ctrl">    
         <table    class="table table-condensed" border ="1" >
             <thead >
                <tr>
                   <th>Sites</th>
                   <th ng-repeat="worstData in ctrl.data"><center>{{$index+1}}</center></th>
                   <!-- <th><center>2</center></th> -->
                   <!-- <th><center>3</center></th> -->
                   <!-- <th><center>4</center></th> -->
                   <!-- <th><center>5</center></th> -->
                </tr>
              </thead>
               <!-- <tbody> -->
                <tbody >
                <tr >
                   <td > PartialSite</td>
                   <td ng-repeat="worstData in ctrl.data[0]">{{$index}} {{worstData.PartialSite}}</td>
                </tr>
                <tr>
                   <td>FailSite</td>
                    <td ng-repeat="worstData in ctrl.data[1]">{{$index}} {{worstData.FailSite}}</td>
                </tr>
                <tr>
                   <td> Jobs mn</td>
                   <td ng-repeat="worstData in ctrl.data[2]">{{$index}} {{worstData.time}}</td>
                </tr>
                <tr>
                   <td>Largest Points</td>
                   <td ng-repeat="worstData in ctrl.data[3]">{{$index}} {{worstData.totalDP}}</td>
                </tr>
             </tbody>
          </table>
      </body>

#2

Answer is already got by some contributor named @Developer. I am just sharing the right code with you to fix this type of problem.

一些名为@Developer的贡献者已经得到了答案。我只是与您分享正确的代码来解决这类问题。

//index.html

 <table    class="table table-condensed" border ="1" >
                 <thead >
                    <tr>
                       <th>Sites</th>
                       <th ng-repeat="worstData in getHeaders(data[0].length) track by $index"><center>{{$index+1}}</center></th>
                       <!-- <th><center>2</center></th> -->
                       <!-- <th><center>3</center></th> -->
                       <!-- <th><center>4</center></th> -->
                       <!-- <th><center>5</center></th> -->
                    </tr>
                  </thead>
                   <!-- <tbody> -->

                    <tbody >
                    <tr >
                       <td > PartialSite</td>

                       <td ng-repeat="worstData in data[0]">{{$index}} {{worstData.PartialSite}}</td>


                    </tr>
                    <tr>
                       <td>FailSite</td>
                        <td ng-repeat="worstData in data[1]">{{$index}} {{worstData.FailSite}}</td>
                    </tr>
                    <tr>
                       <td> Jobs mn</td>
                       <td ng-repeat="worstData in data[2]">{{$index}} {{worstData.time}}</td>
                    </tr>
                    <tr>
                       <td>Largest Points</td>
                       <td ng-repeat="worstData in data[3]">{{$index}} {{worstData.totalDP}}</td>
                    </tr>


                 </tbody>
              </table>

//script.js

angular.module("app", [])
  .controller("sampleCtrl", function($scope) {

    //var _this = this;
    $scope.data = [
      [{
        "PartialSite": "LRS",
        "Partial": 2
      }, {
        "PartialSite": "Sooking",
        "Partial": 1
      }, {
        "PartialSite": "Late",
        "Partial": 1
      }],
      [{
        "FailSite": "Sotelia",
        "fail": 2
      }, {
        "FailSite": "Pccor",
        "fail": 1
      }, {
        "FailSite": "PccroHotels",
        "fail": 0
      }],
      [{
        "ExecSite": "Sotelia",
        "time": 240
      }, {
        "ExecSite": "Late",
        "time": 240
      }, {
        "ExecSite": "Pccor",
        "time": 120
      }],
      [{
        "DataSite": "LRS",
        "totalDP": 16
      }, {
        "DataSite": "Sooking",
        "totalDP": 14
      }, {
        "DataSite": "Pccor",
        "totalDP": 12
      }]
    ];

    $scope.getHeaders = function(index) {
      return new Array(index);
    };

  });

#1