Angular Gridster：调整小部件的大小

Posted 2023-05-08

【中文标题】Angular Gridster：调整小部件的大小

【英文标题】：Angular Gridster : Resize Widget

【发布时间】：2016-09-10 04:32:00

【问题描述】：

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

gridster.resize_widget(widget,6,6)

我不知道如何使用 angular-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>

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