Angular Gridster :调整构件大小

Question

您好，有没有办法可以使用angular-gridster调整小部件的大小。我知道gridster (不是angular版本)有一个这样的函数：

gridster.resize_widget(widget,6,6)

我不知道用angular-gridster怎么做

Answer 1

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

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

angular知道如何显示这些小部件(大小、位置等)的方法是遍历包含小部件对象的数组并读取它们的所有属性。如果要在函数中重置小部件的大小，则需要能够确定要调整哪个小部件的大小，然后重置其sizeX和sizeY属性。一旦您这样做了，这些更改就应该被识别出来，并且小部件也应该发生更改。

Answer 2

我认为你在你声明你的小部件的地方有一些控制器。对吗？

你不需要任何方法。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>

​

因此，如果你只是想以某种超级特定的方式改变小部件的大小-添加更多的细节会很好。因为angular有时对简单的事情有点棘手。