在弹出的模态框中使用表格。

在某些情况下，特别是引导模式，可能会出现表格渲染宽度过小或有时显示不完全。会误认为是由于自举模式的动画渲染导致表格渲染时的可用空间不如预期。可以通过调用handleWindowResize来纠正。动画渲染的时间不好确定，所以一般推荐使用$间隔，在模态框打开后的5秒内每隔500毫秒循环调用。

从某种意义上说，这类似于自动调整大小的功能，但它只在模态框开启后的短时间内完成。

代码：

index.html

！doctype html html ng-app=' app ' head script src=' http :http://Ajax。谷歌API。com/Ajax/libs/angular js/1。5 .0/角度。js '/script script src=' http :http://Ajax。谷歌API。com/Ajax/libs/angular js/1。5 .0/角度触摸。js '/script脚本src=' http 336030。网格{宽度： 300像素高度： 250像素；}app.js

var app=angular.module('app '，['ngTouch '，' ui。网格'])；app.controller('MainCtrl '，['$rootScope '，' $scope '，' $http '，' modal '，' $interval '，function ($rootScope，$scope，$http，modal，$ interval){ var myModal=new modal()；$ scope.hideGrid=true$ root作用域。GridOptions={ OnRegisterAPI :函数(GridAPI){ $ scope。GridAPI=GridAPI//在模式完成打开后，每500毫秒调用调整大小通常只在引导模式$ interval(函数(){ $ scope。格里达皮。核心。handlewindowresize())上有必要；}, 500, 10);} };$http.get('/data/100.json ').成功(函数（数据){ $ rootscope。网格。数据=数据；});$ scope。show MoDEL=function(){ MyMoDEL。open()；};}]);app.factory('modal '，['$compile '，' $rootScope '，function ($compile，$ rootScope){ return function(){ var elm；var modal={ open : function(){ var html=' div class=' modal ' ng-style=' modal style ' { modal style } } div class=' modal-dialog ' div class=' modal-content ' div class=' modal-header '/div class=' modal-body ' div id=' grid 1 ' ui-grid选项' class=' grid '/div/div class=' modal-footer ' button id=' button Close ' class=' BTN BTN-primary ' ng-click elm=angular。元素(html)；角元素(文档。正文)。prepend(elm)；$ RootScope。close=function(){ modal。close()；};$ RootScope。modal style={ ' display ' : ' block ' }；$ compile(elm)($ rootScope)；}，关闭：函数(){ if(elm){ elm。移除()；} } };返回模态；};}]);演示

以上所述是小编给大家介绍的jQuery用户界面网格模态框中的表格，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！