Question

我必须从网格页脚中删除div元素。如何使用角度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在网格选项中为true，则

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

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

我认为这些信息足以回答并提出具体问题。我会感恩的......

Answer 1

他documentation显示了如何覆盖ng-grid的标题模板的html模板。遗憾的是，ng-grid并未提供覆盖页脚的相同功能。

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

div.ngRowCountPicker {
    display: none;
}

另一种选择是分叉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周期添加额外的查询选择只是为了关闭一个元素。

您可以在this jsbin中看到这一点。

如何删除角度js中的元素？

1 个答案: