Правильно отображать JSON в таблице угловой

У меня есть API, которые возвращают меня массив JSON:Правильно отображать 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>

Можете ли вы помочь мне исправить последнюю колонку, поэтому вместо того, чтобы отображать все значения в одной строке, сделать его отображения это в разные строки?

источник

2017-02-14 Angel Silva

результатов является массивом, то вам нужно повторить его, как вы делали с данными –

@AngelSilva ли у Вас повезло получить эту работу? Могу ли я помочь другим способом? –

@TimHarker большое спасибо, он работал безупречно –

Я считаю, что это может быть ближе к тому, что после Ангела Сильва.

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

источник

2017-02-14 23:53:53

большое спасибо –

Не беспокойтесь. Не возражаете ли вы сделать это «принятым» ответом? http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work –

Вы можете создать массив из columns, который может быть назван 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)

Markup

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

источник

2017-02-14 20:19:23

Использовать второй ng-repeat внутри <ul> (неупорядоченный список):

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

источник

2017-02-14 20:28:33

Вы можете попробовать array.join() способ присоединиться все элементы ar луч в строку.

DEMO

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>

источник

2017-02-15 18:25:28

Правильно отображать JSON в таблице угловой

ответ

Смежные вопросы