Question

我有一个像这样的对象数组

var card = [
    {name:'square',color:'red'},
    {name:'triangle',color:'black'},
    {name:'circle',color:'blue'},
    {name:'oval',color:'yellow'},
    {name:'pentagon',color:'green'}
]

我想按照上面的形状生成水平序列的7x7网格，并显示每个的名称，因为数组只有5个对象，我喜欢在第5个元素之后，从第一个对象开始再次，像这样说

SQUARE   | TRIANGLE |  CIRCLE  |   OVAL   | PENTAGON |  SQUARE  | TRIANGLE
CIRCLE   |   OVAL   | PENTAGON |  SQUARE  | TRIANGLE |  CIRCLE  | OVAL
PENTAGON |  SQUARE  | TRIANGLE |  CIRCLE  |   OVAL   | PENTAGON | SQUARE
TRIANGLE |  CIRCLE  |   OVAL   | PENTAGON |  SQUARE  | TRIANGLE | CIRCLE
OVAL     | PENTAGON |  SQUARE  | TRIANGLE |  CIRCLE  |   OVAL   | PENTAGON
SQUARE   | TRIANGLE |  CIRCLE  |   OVAL   | PENTAGON |  SQUARE  | TRIANGLE
CIRCLE   |   OVAL   | PENTAGON |  SQUARE  | TRIANGLE |  CIRCLE  | OVAL

Answer 1

JavaScript的：

var card = [
    {name:'square',color:'red'},
    {name:'triangle',color:'black'},
    {name:'circle',color:'blue'},
    {name:'oval',color:'yellow'},
    {name:'pentagon',color:'green'}
]

var gridData= [];
var itemSize = 7*7;
while (gridData.length < itemSize ){
    gridData= gridData.concat(card);
}

$scope.gridData = gridData.slice(0, itemSize);

HTML：

使用ng-repeat和bootstrap制作7列网格。

对于7列网格，您可以在这里看到： 7 equal columns in bootstrap

在AngularJS中，如何从序列中给定的对象数组生成网格7x7？

1 个答案: