Question

我有一个API，它返回一个JSON数组：

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

如何以角度制作表格，以便正确显示数据？目前我有这个：

current 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

在conda install python-snappy（无序列表）中使用第二个pip install python-snappy：

ng-repeat

Answer 2

我相信这可能更接近天使席尔瓦所追求的目标。

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 http://plnkr.co/edit/NrnFI17P932KckzXRcF4?p=preview

的链接

Answer 3

您可以创建一个columns数组，可以命名为td。循环列以使用当前x

呈现

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

<强>标记

{{1}}

Answer 4

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

<强>样本

＆＃13;

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]
    }];
});

＆＃13;

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

＆＃13;

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

＆＃13;

在表格角度中正确显示JSON

4 个答案: