Как отображать данные одного столбца в табличном формате с угловыми?

Мой REST API возвращает сотни строк данных, который выглядит примерно так:Как отображать данные одного столбца в табличном формате с угловыми?

[ 
{"roman_number":"I"}, 
{"roman_number":"II"}, 
{"roman_number":"III"}, 
{"roman_number":"IV"} 
{"roman_number":"V"}, 
{"roman_number":"VI"}, 
{"roman_number":"VII"}, 
{"roman_number":"VII"}, 
... 
{"roman_number":"MMI"} 
]

я хотел бы, чтобы иметь возможность отображать данные в таблице, как так ...

<table border=1> 
 
    <tr><td>I</td><td>II</td><td>III</td><td>IV</td></tr> 
 
    <tr><td>V</td><td>VI</td><td>VII</td><td>VIII</td></tr> 
 
    <tr><td>IX</td><td>X</td><td>XI</td><td>XII</td></tr> 
 
    <tr><td>XIII</td><td>XIX</td><td>XX</td><td>XXI</td></tr> 
 
    <tr><td colspan=4> pagination here </td></tr> 
 
</table>

Я надеюсь, что сделаю это в угловом режиме, поскольку я использую угловой HTTP для связи с моим REST API. Благодарю.

Обновлено на основе предложения Partha Sarathi Ghosh.

У меня есть это приложение файл:

var app = angular.module("myApp", ['smart-table']); 

angular.module('myApp').filter('chunkby', function() { 
    return function(input, chunk) { 
    var i,j,temparray=[]; 
    if(! input) { return; } 
    for (i=0,j=input.length; i<j; i+=chunk) { 
     temparray.push(input.slice(i,i+chunk)); 
    } 
    return temparray; 
    }; 
});

... и у меня есть этот HTML ...

<table> 
<tr ng-repeat="row in (all_types|chunkby:5)"> 
<td ng-repeat="col in row">{{col}}</td> 
</tr> 
</table>

... но я получаю эту ошибку в моей консоли ...

Error: [$rootScope:infdig] ...

... но данные отображаются нормально. Я заметил, что демоверсия plunker также получает эту ошибку.

источник

2015-11-10 Red Cricket

вы можете использовать директиву Ng повтора угловой к петле над вашими объектами массива и показать его в виде –

но Wouldn» t, что просто дать мне таблицу с одной колонкой? –

Используйте div с правильным стилем (float: left, width: 100px и т. Д.), Чтобы они шли один за другим, и когда не будет места, он создаст следующую строку. Затем используйте ng-repeat, он будет работать с надеждой. –

Попробуйте этот пользовательского фильтр

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

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.data = [0,1,2,3,4,5,6,7,8,9,10,11, 12,13,14,15]; 
 
}); 
 

 
angular.module('plunker').filter('chunkby', function() { 
 
    return function(input, chunk) { 
 
    var i,j,temparray=[]; 
 
    for (i=0,j=input.length; i<j; i+=chunk) { 
 
     temparray.push(input.slice(i,i+chunk)); 
 
    } 
 
    return temparray; 
 
    }; 
 
});

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 
    <table border=1> 
 
     <tr ng-repeat="row in (data|chunkby:4)"> 
 
     <td ng-repeat="col in row">{{col}}</td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 

 
</html>

Plunker Here

источник

2015-11-10 07:53:28

Спасибо! Как бы выглядел выше код без плункера? Я раньше не писал свой собственный фильтр. –

Возьмите часть фильтра только и используйте имя вашего модуля там, где есть ** angular.module ('plunker') **. Затем используйте HTML. {{col}} –

Как отображать данные одного столбца в табличном формате с угловыми?

ответ

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