添加到主體時重複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引導日期選擇器

回答

相關問題