角度网格问题 - 调整大小和重复网格

Question

我正在尝试使用angular gridster在其中包含图表。以下是我正在使用的代码。首先，它不允许我移动或调整任何这些网格。其次，它使网格内的每个图表重复4次。任何人都可以让我知道我可能做错了html或gridster的配置。我已正确引用了css和js文件。

＆＃13;

＆＃13;

$scope.standardItems = [{
        size: {
            x: 2,
            y: 2
        },
        position: [0, 0]
    },
    {
        size: {
            x: 2,
            y: 2
        },
        position: [2, 0]
    },
    {
        size: {
            x: 2,
            y: 3
        },
        position: [0, 2]
    },
    {
        size: {
            x: 1,
            y: 1
        },
        position: [4, 2]
    }
];

$scope.gridsterOpts = {
    minRows: 2, // the minimum height of the grid, in rows
    maxRows: 5,
    columns: 1, // the width of the grid, in columns
    colWidth: 'auto', // can be an integer or 'auto'.  'auto' uses the pixel width of the element divided by 'columns'
    rowHeight: 'match', // can be an integer or 'match'.  Match uses the colWidth, giving you square widgets.
    margins: [10, 10], // the pixel distance between each widget
    defaultSizeX: 2, // the default width of a gridster item, if not specifed
    defaultSizeY: 1, // the default height of a gridster item, if not specified
    minSizeX: 1, // minimum column width of an item
    maxSizeX: null, // maximum column width of an item
    minSizeY: 1, // minumum row height of an item
    maxSizeY: null, // maximum row height of an item
    isMobile: true, // stacks the grid items if true
    mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
    mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
    resizable: {
        enabled: true,
        start: function(event, uiWidget, $element) {}, // optional callback fired when resize is started,
        resize: function(event, uiWidget, $element) {}, // optional callback fired when item is resized,
        stop: function(event, uiWidget, $element) {} // optional callback fired when item is finished resizing
    },
    draggable: {
        enabled: true, // whether dragging items is supported
        handle: 'h5', // optional selector for resize handle
        start: function(event, uiWidget, $element) {}, // optional callback fired when drag is started,
        drag: function(event, uiWidget, $element) {}, // optional callback fired when item is moved,
        stop: function(event, uiWidget, $element) {} // optional callback fired when item is finished dragging
    }
};

＆＃13;

<div gridster="gridsterOpts">
    <ul>
        <li style="border: solid 1px;" gridster-item="item" ng-repeat="item in standardItems">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4">

                        <h5>{{charts.data.chartsName[$parent.$index]}}</h5>

                    </div>

                    <div class="field-container" style="margin-top: 10px;">
                        <select class="form-control col-md-4" ng-change="charts.hasChanged[arrKey]" ng-model="charts.type[arrKey]" ng-init="charts.type[arrKey] = charts.data.chartsDefault[$parent.$index]">
									<option  ng-repeat="chartsTypeValue in charts.data.chartsType[arrKey] " >{{chartsTypeValue}}</option>
								</select>
                        <!--		<label class="floating-label">Chart Type</label> -->
                    </div>
                </div>
            </div>

            <div class="svg-container" ng-if="charts.type[arrKey] =='Bar'" style="width: 400px; height: 250px;">
                <bars-chart ng-if="arrValue" chart-data="arrValue" />
            </div>
            <div class="svg-container " ng-if="charts.type[arrKey] =='Pie'" style="text-align: -webkit-center; width: 400px; height: 220px; ">
                <donut-Chart ng-if="arrValue" chart-data="arrValue">
                </donut-chart>
            </div>
            <div class="svg-container " ng-if="charts.type[arrKey]=='Line'" style="width: 400px; height: 220px; ">
                <line-Chart ng-if="arrValue" chart-data="arrValue">
                </line-chart>
            </div>
            <hr>
        </li>
    </ul>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;