0

我必须从网格页脚中删除 div 元素。如何使用 Angular js 删除。我有类似 myGrid.html 的代码

 <div class="row-fluid">
   <div class="span12">
     <div style="height: 450px; width: 100%;" ng-grid="myGrid"></div>
   </div>
 </div>

我的 myGrid.js 代码看起来像这样-

     $scope.myGrid= {
            data : 'myData',
            showFooter : true,
            enablePaging : true,
            pagingOptions : $scope.pager.pagingOptions,
            enablePinning : true,
            columnDefs : [{
                        field : 'myField_1',
                        displayName : 'MyField_1',
                        width : '300',
                        pinnable : false
                    }, {
                        field : 'myField_2',
                        displayName : 'MyField_2',
                        width : '200',
                        pinnable : false
                    }, {
                        field : 'myField_3',
                        displayName : 'MyField_3',
                        width : '300',
                        pinnable : false
                    }]
        };

如果在网格选项中 showFooter 为真，则角网格带有页脚，这里我想显示页脚，但我必须从页脚中删除一些 div 元素。请你帮帮我，如何从网格页脚中删除这个特定的 div 元素。div 元素与类

     <div class="ngRowCountPicker"></div>

我认为这些信息足以回答并使问题具体化。我将不胜感激......

4

1 回答 1

0

他的文档显示了如何覆盖 ng-grid 的标题模板的 html模板。不幸的是，ng-grid没有提供相同的功能来覆盖页脚。

最简单的方法是在项目的样式表中添加一些自定义 CSS：

div.ngRowCountPicker {
    display: none;
}

另一种选择是 fork ng-grid并根据自己的喜好自定义模板。

您还可以创建一个directive用于监视元素的显示状态，然后在显示时将其隐藏。像这样的东西（但这是矫枉过正 - 只需使用自定义 css）：

app.directive('removeElement', function () {
   // directive to watch for and hide a given element
   return {
       link: function (scope, element, attrs) {

           var offendingElement,
               offendingElementSelector = attrs.removeElement;

           scope.$watch(
               function () {
                   offendingElement = $(offendingElementSelector);
                   return offendingElement.css('display');
               }, function (newValue, oldValue) {
                   if ( newValue !== 'none' ) {
                       // assuming you're using JQuery
                       offendingElement.hide();
                   }
               });
        }
    };
});

在您的 html 中，您可以像这样使用它：

<div class="span12">
  <div style="height: 450px; width: 100%;" ng-grid="myGrid"></div>
  <div remove-element="div.ngRowCountPicker"></div>
</div>

像这样的事情的缺点是您在每个$digest循环中添加一个额外的查询选择只是为了关闭一个元素。

你可以在这个 jsbin中看到这个。

于 2013-06-29T10:59:56.010 回答