Angular Gridster：调整小部件的大小答案

【问题标题】：Angular Gridster : Resize WidgetAngular Gridster：调整小部件的大小
【发布时间】：2016-09-10 04:32:00
【问题描述】：

嗨，有没有一种方法可以使用 angular-gridster 调整小部件的大小。我知道gridster（不是角度版本）有这样的功能：

gridster.resize_widget(widget,6,6)

我不知道如何使用 angular-gridster 来做到这一点

【问题讨论】：

标签： angularjs drag-and-drop draggable gridster

【解决方案1】：

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

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

angular 知道如何显示这些小部件（大小、位置等）的方式是循环遍历包含小部件对象的数组并读取它们的所有属性。如果要在函数中重置小部件的大小，则需要能够识别要调整大小的小部件，然后重置其 sizeX 和 sizeY 属性。只要您这样做，更改就会被识别出来，并且小部件也应该更改。

【讨论】：

【解决方案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>

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

【讨论】：