javascript - 页面加载几秒钟后打开 Bootstrap Accordion 时，ui-grid 为空白？

Question

所以我目前正在尝试动态创建可扩展为包含一些数据的用户界面网格的 Accordion 。问题是，如果我不在页面加载后几秒钟内展开 Accordion ，则 ui 网格将为空白。表应存在但没有显示数据的位置的轮廓。我说显示是因为数据本身在 html 中。好像被 Accordion 隐藏了？当我调整浏览器窗口大小时，数据就会出现。抱歉，如果这不够详细或者我错过了明显的调试步骤，我是 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

我会对此进行尝试，并说您可能想要向 ui 网格添加 ng-if="isOpen" 。所以像下面这样的东西应该可以解决你的问题。

 <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 详细介绍了隐藏网格的概念。 。他们还有一个 plnkr，您可以关注 http://plnkr.co/edit/LtpFnDUTofuxitb4Vh9x?p=preview 。我希望这有帮助!