當包含div大小的父級更改時，如何動態更改ng-grid表大小？

Question

我使用ng-class和一個表達式來改變包含div的大小，該表達式用於評估是否顯示編輯表單。如果顯示編輯表單，我想改變包含ng-grid和ng-grid本身的div的大小。

<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> 

包含導航欄和網格的格改變經由納克級（從span12到span7）大小，但NG-網格不刷新。如何觸發父網格中的更改ng網格的刷新？

以下附上我的gridOptions：

$scope.gridOptions = { 
plugins: [gridLayoutPlugin], 
data : 'activities', 
showFilter: true, 
/* enablePaging: true,*/ 
showColumnMenu: true, 
/* showFooter: true,*/ 
rowHeight: 70, 
enableColumnResize: true, 
multiSelect: false, 
selectedItems: $scope.selectedActivities, 
afterSelectionChange: function(rowItem,event){ 
    if($scope.selectedActivities && $scope.selectedActivities.length > 0){ 
     $scope.activity = $scope.selectedActivities[0]; 
     $scope.activityViewState.index = $scope.activities.indexOf($scope.activity); 
     $scope.displayEditForm = true; 
     console.log("DEBUG :::::::::::::::: updated displayEditForm.",   $scope.displayEditForm); 

         if($scope.activity.ucdEdusMeta.startDate) { 

          // $scope.activity.ucdEdusMeta.startDate = new Date($scope.activity.ucdEdusMeta.startDate); 
          $scope.edit.startDate = moment($scope.activity.ucdEdusMeta.startDate).format("MM/DD/YYYY"); 
          $scope.edit.startTime = moment($scope.activity.ucdEdusMeta.startDate).format("hh:mm A"); 
         } 

         if($scope.activity.ucdEdusMeta.endDate) { 

          // $scope.activity.ucdEdusMeta.endDate = new Date($scope.activity.ucdEdusMeta.endDate); 
          $scope.edit.endDate = moment($scope.activity.ucdEdusMeta.endDate).format("MM/DD/YYYY"); 
          $scope.edit.endTime = moment($scope.activity.ucdEdusMeta.endDate).format("hh:mm A"); 
         } 

        } 
       }, 
     /* pagingOptions: { pageSizes: [5, 10, 20], pageSize: 10, totalServerItems: 0, currentPage: 1 },*/ 
     columnDefs: [ 
      {field: 'title', displayName: 'Title', width:'15%', 
         cellTemplate: '<div class="ngCellText", style="white-space: normal;">{{row.getProperty(col.field)}}</div>'}, 
      {field: 'actor.displayName', displayName: 'DisplayName', width:'10%', 
         cellTemplate: '<div class="ngCellText", style="white-space: normal;">{{row.getProperty(col.field)}}</div>'}, 
      {field: 'object.content', displayName:'Content', width:'35%', 
         cellTemplate: '<div class="ngCellText", style="white-space: normal;">{{row.getProperty(col.field)}}</div>'}, 
      {field: 'ucdEdusMeta.startDate', displayName: 'Start Date', width:'20%', 
         cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field) | date:"short"}} </span></div>'}, 
      {field: 'ucdEdusMeta.endDate', displayName: 'End Date', width:'20%', 
         cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field) | date:"short"}} </span></div>'} 
      // {field: '', displayName: ''}, 
      ] 
}; 

這裏是由電網使用的CSS：

.edus-admin-manage-grid { 
    border: 1px solid rgb(212,212,212); 
    width: 100%; 
    height: 700px 
} 

Answer 1

可以使用NG-網格佈局插件（NG-網layout.js ）。它應該與ngGrid位於：

ng-grid/plugins/ng-grid-layout.js 

（更新：現在https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-layout.js）

您必須包括一個額外的腳本標籤指向這個js文件在主index.html文件。包含這個和ng-grid.js的順序很重要。

您必須在displayEditForm上設置手錶，然後調用插件的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(); 
}); 

從我的理解，手錶，總體上屬於中link函數，而不是控制，但它會在任何點工作。您還可以進一步說：

$scope.$watch('displayEditForm', function(newVal, oldVal) { 
    if (newVal !== undefined && newVal !== oldVal) { 
     gridLayoutPlugin.updateGridLayout(); 
    } 
}); 

確保只有在數據從真/假切換時觸發。如果您的數據最初是未定義的，那麼這很重要，並且在您給它初始值之前浪費時間調用網格重繪。