使用控制器中对象的位置 x，y 创建一个动态网格或表格 - 引导程序，AngularJS

Create a dynamic grid or table using positions x,y from an object in controller - bootstrap, AngularJS

本文关键字：动态 一个 网格 AngularJS 引导程序 表格 对象 控制器 位置 创建      更新时间：2023-09-26

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

问题是我在控制器上有这些对象：

$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 列），有人可以帮我吗？我在这里挣扎，无法想象从来没有人尝试过做这样的事情......

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

变换功能：

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>

演示平台

相关文章：