Angular Gridster：调整小部件

Question

您好我可以使用angular-gridster调整窗口小部件的大小。我知道gridster（不是角度版本）有这样的功能：

gridster.resize_widget(widget,6,6)

我不知道如何使用angular-gridster

来做到这一点

Answer 1

我认为你有一些控制器，你宣布你的小部件。正确？

你不需要任何方法。 Angular为您处理它。如果您在角度控制器$ scope.your_widgets中更改了一些小部件 - 您的所有更改也将在模板中。

//so your widgets probably looks like this in your controller.

$scope.standardItems = [
  { sizeX: 2, sizeY: 1, row: 0, col: 0 },
  { sizeX: 2, sizeY: 2, row: 0, col: 2 },
  { sizeX: 1, sizeY: 1, row: 0, col: 4 },
  { sizeX: 1, sizeY: 1, row: 0, col: 5 },
  { sizeX: 2, sizeY: 1, row: 1, col: 0 },
  { sizeX: 1, sizeY: 1, row: 1, col: 4 },
  { sizeX: 1, sizeY: 2, row: 1, col: 5 },
  { sizeX: 1, sizeY: 1, row: 2, col: 0 },
  { sizeX: 2, sizeY: 1, row: 2, col: 1 },
  { sizeX: 1, sizeY: 1, row: 2, col: 3 },
  { sizeX: 1, sizeY: 1, row: 2, col: 4 }
];

//and where ever you want (in controller I mean) - you can do like this:

$scope.standardItemems[3].sizeX = 6;
$scope.standardItemems[3].sizeY = 6;

<div gridster>
    <ul>
        <li gridster-item="item" ng-repeat="item in standardItems"></li>
    </ul>
</div>

因此，如果您只是想以某种超级特定的方式更改窗口小部件，那么添加更多细节会更好。对于简单的事情，Cuz有时候有点棘手。

Answer 2

这取决于你想要做什么。如果您只是希望它们以特定大小开始，那么您需要更改gridsterOpts。如果要使用鼠标手动调整大小，则需要确保gridsterOpts可调整字段的属性“enabled”设置为true。如果您正在运行一个自动调整窗口小部件大小的函数，那么这是另一种情况。

基本上，小部件的大小由gridster通过查看小部件的sizeX和sizeY属性来确定，这些属性始终保存在小部件对象中。无论何时手动调整窗口小部件的大小，该窗口小部件的sizeX和sizeY属性都会自动更新。小部件可以以sizeX = 2和sizeY = 3开头，但是一旦调整大小以使其变大，这两个属性就会改变。

angular知道如何显示这些小部件（大小，位置等）的方式是循环遍历包含小部件对象并读取其所有属性的数组。如果要在函数内重置窗口小部件的大小，则需要能够识别要调整大小的窗口小部件，然后重置其sizeX和sizeY属性。一旦这样做，应该识别更改并且窗口小部件应该更改。