Javascript 使用行和列值angularjs对齐gridster项

我使用angularjs、kendoui图表和AngularGridster（）创建了一个仪表板

因此，我有一个函数可以添加一个gridster，其图表如下：-

//将小部件添加到仪表板
$scope.addWidget=函数（）{
//新窗口小部件配置
var newWidget={
id:$scope.allWidgetData.selectedOption.id，
数据来源：{}，
配置：{
名称：$scope.allWidgetData.selectedOption.name，
sizeX:3，
西西：2，
行：$scope.row，
col:$scope.col
}  
};
}
//进行api调用并保存数据

我为您创建了一支工作笔如何做到这一点：

我也遇到过类似的问题，我就是这样解决的。确保引用的对象值正确。当ajax调用准备就绪时，您可能还需要设置位置：

<li ng-repeat="widget in widgets"
          class="panel" gridster-item
          row="widget.posY"
          col="widget.posX"
          size-x="widget.width"
          size-y="widget.height">
        <div class="panel-heading">
          <h3 class="panel-title">{{widget.title}}</h3>
        </div>
</li>

我猜你的问题与对象引用有关，或者你没有设定承诺的立场。你也可以试试我用的叉子。因为对我来说，这个设置很有效，小部件出现在我保存它们的地方

$scope.gridsterOptions = {
  resizable: {
    enabled: false,
  },
  floating: true,
  pushing: true,
  swapping: true,
  isMobile: true,
  mobileBreakPoint: 768,
  columns: getColumns(),
  dynamicColumns: true,
  minWidthToAddANewColumn: 255,
  rowHeight: 400,
  draggable: {
    enabled: true,
    handle: '.panel-heading'
  }
};

const getColumns = () => {
  const browserWidth = $window.innerWidth;
  if (browserWidth < 1300) {
    return 3;
  } else if (browserWidth < 1500) {
    return 4;
  } else if (browserWidth < 1700) {
    return 5;
  }
  return 6;
};

const loadedWidgets = [];
    if (settings) {
      const loadAllWidgets = () => new Promise(resolve =>
          loadedWidgets.push(widget);
          resolve();
        }));

  const actions = settings.chartsettings.map(loadAllWidgets);
  Promise.all(actions).then(() => {
    const widgetList = loadedWidgets.map(widget => widget);
    $scope.widgets = widgetList;
  });
}