在tableangular中正确显示JSON

Question

我有一个 API，其中 return 我有一个 JSON 数组：

{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}

如何在 angular 中创建 table，以便正确显示数据？目前我有这个：

我的html代码是：

<table class="table table-striped " ng-show="tableR">
        <thead>
          <tr>
            <th>i Value</th>
            <th>j Value</th>
            <th>iternation Number Value</th>
            <th>results</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="x in data">
            <td>{{x.i}}</td>
            <td>{{x.j}}</td>
            <td>{{x.iterationNumber}}</td>
            <td>{{x.results}}</td>
          </tr>
        </tbody>
      </table>

你能帮我修正最后一列，让它显示在不同的行中，而不是在一行中显示所有值吗？

Answer 1

您可以创建一个 columns 的数组，并将其命名为 columns。遍历列以使用当前 x

呈现 td 的数据

控制器

$scope.data = {"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]};
$scope.columns = Object.key($scope.data)

标记

<tr ng-repeat="x in data">
    <td ng-repeat="column in columns">{{x[column]}}</td>
</tr>

Answer 2

在 <ul>（无序列表）中使用第二个 ng-repeat：

<table class="table table-striped " ng-show="tableR">
    <thead>
      <tr>
        <th>i Value</th>
        <th>j Value</th>
        <th>iternation Number Value</th>
        <th>results</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="x in data">
        <td>{{x.i}}</td>
        <td>{{x.j}}</td>
        <td>{{x.iterationNumber}}</td>
        <td>
            <ul>
                <li ng-repeat="r in x.results">
                    {{ r }}
                </li>
            </ul>
        </td>
      </tr>
    </tbody>
  </table>

Answer 3

我相信这可能更接近 Angel Silva 所追求的目标。

HTML:

  <body ng-controller="MainCtrl">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>i Value</th>
          <th>j Value</th>
          <th>iternation Number Value</th>
          <th>results</th>
        </tr>
      </thead>
      <tbody ng-repeat="x in data">
        <tr ng-repeat="r in x.results">
          <td>{{x.i}}</td>
          <td>{{x.j}}</td>
          <td>{{x.iterationNumber}}</td>
          <td>{{r}}</td>
        </tr>
      </tbody>
    </table>
  </body>

JavaScript/AngularJS:

app.controller('MainCtrl', function($scope) {
  $scope.data = [{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}];
});

这是给正在工作的 Plunker 的 link，http://plnkr.co/edit/NrnFI17P932KckzXRcF4?p=preview

Answer 4

您可以尝试array.join()方法将数组的所有元素连接成一个字符串。

演示版

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.tableR = true;
    $scope.data = [{
    "i":11,
    "j":12,
    "iterationNumber":9,
    "results":[12,6,3,10,5,16,8,4,2,1]
    }];
});

tr,th,td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table class="table table-striped " ng-show="tableR">
        <thead>
          <tr>
            <th>i Value</th>
            <th>j Value</th>
            <th>iternation Number Value</th>
            <th>results</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="x in data">
            <td>{{x.i}}</td>
            <td>{{x.j}}</td>
            <td>{{x.iterationNumber}}</td>
            <td>{{x.results.join()}}</td>
          </tr>
        </tbody>
      </table>
</div>

在tableangular中正确显示JSON

Properly display JSON in table angular

json

html-table

angularjs

display