javascript - 使用 Controller 中对象的位置 x,y 创建动态网格或表格 - bootstrap、AngularJS

Question

我在使用对象提供的位置创建动态表格或网格时遇到很多麻烦，我不知道我是否不擅长搜索，但我在谷歌上没有找到解决方案。

问题是我在 Controller 上有这些对象:

$scope.stacks = [{
    'id': 1,
    'rid': [1, 3, 7, 9],
    'power': 'On',
    'x': '1',
    'y': '1'
  }, {
    'id': 2,
    'rid': [2, 12, 10, 6],
    'power': 'Off',
    'x': '1',
    'y': '2'
  }, {
    'id': 3,
    'rid': [4, 5, 11, 8],
    'power': 'Off',
    'x': '1',
    'y': '3'
  }, {
    'id': 4,
    'rid': [13, 14, 15, 16],
    'power': 'Off',
    'x': '1',
    'y': '4'
  }, {
    'id': 5,
    'rid': [17, 18],
    'power': 'Off',
    'x': '2',
    'y': '1'
  }
]

关于位置 x 和 y，我希望能够设置每个对象位置并使用 ng-repeat，现在假设我只想显示一个带有堆栈 id 的按钮，但使用 x,y 在正确的位置职位。

<div class="row">
  <div ng-repeat="myStack in stacks">
    <button type="button" class="btn btn3-success btn-lg btn3d"><span class="glyphicon glyphicon-ok"></span> {{myStack.id}}</button>
  </div>
</div>

我不知道如何将位置链接到 HTML(这意味着您有 1,2 个位置，因此您将被设置在第 1 行第 2 列)，有人可以帮助我吗？我在这里挣扎，无法想象没有人尝试过做这样的事情......

Answer 1

将数组转换为行列表，其中每行都有一个单元格列表。

转换函数:

function transformToRows(stacks) {
    var ordered = $filter('orderBy')(stacks, '\'x\'');
    var rows = [];

    var maxRows = ordered[ordered.length-1].x;
    var maxCells = 0;
    angular.forEach(ordered, function(item) {
      if (item.y > maxCells)
        maxCells = item.y;
    });    


    for (let i = 0; i < maxRows; ++i) {
      var row = { index: i, cells: [] };
      rows.push(row);
       for (let j = 0; j < maxCells; ++j)
         row.cells.push({ index: j, data: undefined });
    }

    angular.forEach(ordered, function(item) {
       var row = rows[item.x-1];
       row.cells[item.y-1].data = item;
    });    
    return rows;
}

这会将您的数组转换为以下内容:

[{ index: 0, 
   cells: [ 
       { index: 0, data: {...} }, 
       { index: 0, data: {...} }] 
  }, 
  { index: 1, 
    cells: [ 
       { index: 0, data: {...} }] 
    },
    ...
]

单元格的 data 属性包含您的堆栈。

然后您可以使用 ngRepeat 呈现表格中的行和单元格:

<table border="1">
  <tr ng-repeat="row in rows">
    <td ng-repeat="cell in row.cells">
      {{ cell.data.power }}
    </td>
  </tr>
</table>

Demo Plnkr