Html 当包含div大小的父级更改时,如何动态更改ng网格表大小?
我正在使用ng类和计算是否显示编辑表单的表达式更改包含div的大小。如果显示编辑表单,我想更改包含ng网格和ng网格本身的div的大小Html 当包含div大小的父级更改时,如何动态更改ng网格表大小?,html,css,angularjs,twitter-bootstrap,Html,Css,Angularjs,Twitter Bootstrap,我正在使用ng类和计算是否显示编辑表单的表达式更改包含div的大小。如果显示编辑表单,我想更改包含ng网格和ng网格本身的div的大小 <div class=" row-fluid"> <div ng-class="{'span7' : displayEditForm == true, 'span12': displayEditForm == false}" > <ul class="nav nav-tabs" style="margin-b
<div class=" row-fluid">
<div ng-class="{'span7' : displayEditForm == true, 'span12': displayEditForm == false}" >
<ul class="nav nav-tabs" style="margin-bottom: 5px;">
<li class="active"><a href="#" ng-click="getActivitiesThatNeedMyApproval()" data-toggle="tab">Activities Needing My Approval</a></li>
<li><a href="#" ng-click="getMyActivitiesNeedingApproval()" data-toggle="tab">My Activities Needing Approval </a></li>
<li><a href="#" ng-click="getMyActivities()" data-toggle="tab">My Activities</a></li>
</ul>
<div class="edus-admin-manage-grid span12" style="margin-left:0;" ng-grid="gridOptions"></div>
</div>
<div class="span5" ng-show="displayEditForm">
<div class="edus-activity-container">
<div class="edus-admin-activities-grid">
<div ng-include="'/partials/' + activity.object.objectType + '.html'" class="edus-activity"></div>
<!-- <div ng-include="'/partials/admin-activity-actions.html'"></div>-->
</div>
</div>
<div ng-include="'/partials/admin-edit-activity-grid-form.html'"></div>
</div>
</div>
您可以使用nggrid的布局插件(nggrid layout.js)。它应配备位于以下位置的ngGrid:
ng-grid/plugins/ng-grid-layout.js
(更新:现在位于)
您必须在主index.html文件中包含指向此js文件的附加脚本标记。而将其与ng-grid.js进行比较的顺序很重要
您必须在displayEditForm
上设置一个watch,然后调用插件的updateGridLayout()
函数
所以它会是这样的:
var gridLayoutPlugin = new ngGridLayoutPlugin();
// include this plugin with your grid options
$scope.gridOptions = {
// your options and:
plugins: [gridLayoutPlugin]
};
// make sure grid redraws itself whenever
// the variable that ng-class uses has changed:
$scope.$watch('displayEditForm', function() {
gridLayoutPlugin.updateGridLayout();
});
据我所知,手表通常属于链接
功能,而不是控制器,但它可以在任一点工作。你也可以更进一步说:
$scope.$watch('displayEditForm', function(newVal, oldVal) {
if (newVal !== undefined && newVal !== oldVal) {
gridLayoutPlugin.updateGridLayout();
}
});
确保仅当数据从true/false切换时才会触发此命令。如果您的数据最初未定义,并且在给出初始值之前浪费时间调用网格重画,那么这将很重要。有一种方法可以借助ng grid的ng grid layout插件来实现这一点。这几乎可以。。。一个问题似乎是重新应用与分配给ng网格的div相关联的CSS。当网格重新调整大小时,背景和边框不会改变。哪些css类似乎没有被应用?包括您的gridOptions和CSS类定义可能有助于解决这个问题。我已经在上面包括了我的gridOptions和相关CSS。谢谢你的帮助!我仍然不能理解你剩下的问题。我需要看一个工作的JSFIDLE或者至少一些屏幕截图。网格是否正确调整大小,但包含的边框仍显示为旧大小?如果您描述如何不重新应用样式,这会有所帮助。是否存在javascript错误?它们已升级到版本3。该插件可以在2.x分支中找到:不确定该插件是否用于v3。
var gridLayoutPlugin = new ngGridLayoutPlugin();
// include this plugin with your grid options
$scope.gridOptions = {
// your options and:
plugins: [gridLayoutPlugin]
};
// make sure grid redraws itself whenever
// the variable that ng-class uses has changed:
$scope.$watch('displayEditForm', function() {
gridLayoutPlugin.updateGridLayout();
});
$scope.$watch('displayEditForm', function(newVal, oldVal) {
if (newVal !== undefined && newVal !== oldVal) {
gridLayoutPlugin.updateGridLayout();
}
});