添加到主体时重复UI引导日期选择器

我在ui.grid中的过滤器标题模板中使用ui.bootstrap.datepickerPopup。这使我可以按日期过滤行。网格菜单中还有一个按钮，用于切换grid.options.enableFiltering。添加到主体时重复UI引导日期选择器

由于与ui-grid的对齐问题，我的datepicker-append-to-body设置为我的日期选择器为真。第一次启用筛选时，一切正常。但是，当我禁用筛选并重新启用它时，我会得到重复的日期选择器。

这是问题的样子：

我认为这个问题是每个过滤器被启用时，以下div追加到DOM，当过滤器被禁用永远不会被删除。

<div uib-datepicker-popup-wrap="" 
    ng-model="date" 
    ng-change="dateSelection(date)" 
    template-url="uib/template/datepickerPopup/popup.html" 
    class="ng-pristine ng-untouched ng-valid ng-scope ng-empty ng-valid-date-disabled" 
> 
    <!-- ngIf: isOpen --> 
</div>

这里有一个简单的plunker：http://plnkr.co/edit/eYZt87j2O6A5xhjHj5ZG
我得到同样的问题，如果我只用Time Range过滤头内的一个日期选择器。

任何想法，非常感谢！不想使用jQuery。

来源

2017-09-07 Borja Canseco

这是wiered。当你切换过滤器选项时，它会继续每次在body中添加2个datepicker ..我没有切换4次grid的过滤器选项，并且我看到DOM中添加了8个uib-datepicker。另外一个有趣的问题是，为什么当您打开过滤器时，它只显示2个日期选择器：D –

我没有对为什么发生这种情况，但使用的触发document.querySelectorAll（）过滤器切换

var elements = document.querySelectorAll("div[uib-datepicker-popup-wrap]"); 
Array.prototype.forEach.call(elements, function(node) { 
    node.parentNode.removeChild(node); 
});

Plunker here

时没有jQuery的一个解决办法是去除弹出一个答案

来源

2017-09-07 18:27:14

您的解决方案是一个很好的解决方法，谢谢！对于任何人在将来阅读这篇文章时，你可以把它放在'span'的指令的'$ onInit'中，将'.ui-grid-filter-container'封装起来，使它更清洁。 –

添加到主体时重复UI引导日期选择器

回答

相关问题