ui-在页面加载几秒后打开 bootstrap 手风琴时网格是空白的？

Question

所以我目前正在尝试动态创建可扩展到包含一些数据的 ui 网格的手风琴。问题是，如果我在页面加载后的几秒钟内不展开手风琴，ui-网格是空白的。 table 所在位置的轮廓应该存在，但没有显示任何数据。我说被显示是因为数据本身在 html 中。它似乎被手风琴隐藏了？当我调整浏览器 window 大小时，数据出现了。抱歉，如果这不够详细或者我错过了明显的调试步骤，我是 js/angular 和 html 的新手。下面是我的HTML代码

<div ng-controller="TestController as test">
    <script type="text/ng-template" id="group-template.html">
        <div class="panel-heading">
            <h4 class="panel-title" style="color:#fa39c3">
                <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
                    <span uib-accordion-header ng-class="{'text-muted': isDisabled}">
                        TEST
                    </span>
                </a>
            </h4>
        </div>
        <div class="panel-collapse collapse" uib-collapse="!isOpen">
            <div class="panel-body" style="text-align: right" ng-transclude></div>
        </div>
    </script>
    <uib-accordion close-others="oneAtATime">
        <div ng-repeat="model in myData" track by $index>
            <div uib-accordion-group class="panel-default" is-open="isOpen">
                <uib-accordion-heading>
                    Test Model {{$index}} <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
                </uib-accordion-heading>
                <div id="grid[$index]" ui-grid="gridOptions[$index]" ui-grid-edit class="grid" style="clear:both"></div>
                <br />
                <strong>Last Cell Edited:</strong>{{msg[$index]}}<br />
                <button>Commit Changes</button>
            </div>
        </div>
    </uib-accordion>

和我的angular

(function () {
var app = angular
    .module('testApp', ['ui.grid', 'ui.grid.edit', 'ui.bootstrap', 'ngAnimate'])
    .controller('TestController', TestController);

TestController.$inject = ['$scope', 'uiGridConstants'];

function TestController ($scope, uiGridConstants) {
    $scope.oneAtATime = false;
    $scope.myData = myData;
    $scope.msg = [];
    $scope.gridOptions = [];
    $scope.getGridOptions = function (index) {
        $scope.gridOptions[index] ={
            showColumnFooter: true,
            columnDefs: [
                { field: 'ticker', enableCellEdit: false, width: '33%' },
                { field: 'current_w', aggregationType: uiGridConstants.aggregationTypes.sum, enableCellEdit: false, width: '33%' },
                { field: 'new_w', aggregationType: uiGridConstants.aggregationTypes.sum, width: '33%' }
            ],
            data: myData[index],
            onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;
                gridApi.edit.on.afterCellEdit($scope, function (rowEntity, colDef, newValue, oldValue) {
                    $scope.msg[index] = 'Edited Ticker:' + rowEntity.ticker + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue;
                    $scope.$apply();
                })
            }
        }
    };
    for (i = 0; i < Object.keys($scope.myData).length; i++) {
        $scope.getGridOptions(i);
        console.log($scope.gridOptions[i]);
    };
    console.log($scope.gridOptions[1]);
};

var myData = [
        [{ ticker: 'TICKER', current_w: 5, new_w: 4, },
        { ticker: 'TICKER 2', current_w: 3, new_w: 2, },
        { ticker: 'TICKER 3', current_w: 7, new_w: 0, }],

        [{ ticker: 'TICKER', current_w: 5, new_w: 4, },
        { ticker: 'TICKER 2', current_w: 3, new_w: 2, },
        { ticker: 'TICKER 3', current_w: 7, new_w: 5, }]
];

})();

Answer 1

我会试一试，并说您可能想将 ng-if="isOpen" 添加到 ui-网格。所以像下面这样的东西应该可以解决你的问题。

 <div id="grid[$index]" ui-grid="gridOptions[$index]" ui-grid-edit class="grid" style="clear:both" ng-if="isOpen"></div>

我的网格显示也有问题，确保网格仅在完全准备就绪时出现解决了这个问题。 ui-grid 文档在 http://ui-grid.info/docs/#/tutorial/108_hidden_grids. They also have a plnkr that you can follow at http://plnkr.co/edit/LtpFnDUTofuxitb4Vh9x?p=preview 上讨论了隐藏网格的概念。希望对您有所帮助！

ui-在页面加载几秒后打开 bootstrap 手风琴时网格是空白的？

ui-grid is blank when opening a bootstrap accordion a few seconds after the page loads?

html

javascript

twitter-bootstrap

angularjs

angular-ui-grid