4

ui.grid 안에 필터 헤더 템플릿에 ui.bootstrap.datepickerPopup을 사용하고 있습니다. 이렇게하면 날짜별로 행을 필터링 할 수 있습니다. grid.options.enableFiltering을 토글하는 그리드 메뉴 안에 버튼이 있습니다.UI 부트 스트랩 날짜 피커가 본문에 추가 될 때 중복됩니다.

ui-grid의 정렬 문제로 인해 내 datepickers에 datepicker-append-to-body이 true로 설정되었습니다. 필터링을 처음 사용할 때 모든 것이 잘 동작합니다. 그러나 필터링을 비활성화하고 다시 활성화하면 중복되는 datepickers가 발생합니다. 나는 문제가 필터가 활성화마다, 다음 div가 DOM에 추가하고 필터를 사용할 때 제거되지 않습니다 것을 생각

:

이 같은 문제가 모습입니다. 나는 단지 Time Range 필터 헤더 안에 한 날짜 선택기를 사용하면 저도 같은 문제를 얻을http://plnkr.co/edit/eYZt87j2O6A5xhjHj5ZG
:

<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입니다.

모든 아이디어를 매우 높이 평가합니다. jQuery를 사용하고 싶지는 않습니다.

+0

이것은 치명적입니다. 필터 옵션을 토글 할 때마다 매번 몸체에 2 개의 datepicker를 계속 추가합니다. 그리드의 필터 옵션을 4 번 토글하고 DOM에 8 개의 uib-datepicker가 추가 된 것을 보았습니다. 또한 다른 흥미로운 질문은 왜 필터를 열었을 때 2 개의 datepicker 만 보여줄까요? D –

답변

1

나는 이런 일이 있지만 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를하지 않고 솔루션이 팝업을 제거하는 것입니다 이유에 대한 답변이 없습니다
+1

당신의 솔루션은 훌륭한 해결 방법입니다, 감사합니다! 앞으로 이것을 읽는 사람은'.ui-grid-filter-container'를 감싸는'span'에있는 지시어의'$ onInit'에 이것을 던져서 조금 깔끔하게 만들 수 있습니다. –