특정 행을 숨기기 위해 ng-grid를 얻는 방법

ng-grid에 표시 할 개체 배열이 있습니다. 각 행에는 부울 속성 isVisible이 있습니다. NG 그리드에서 isVisible이 참인 행만 표시하려고합니다. 다른 행은 이어야하며 완전히이 숨겨져 있어야합니다.특정 행을 숨기기 위해 ng-grid를 얻는 방법

나는 rowTemplate을 사용하고 데이터 바인딩은 ng-show에서 isVisible으로 시도했다. 이는 행의 내용을 숨기지 만 실제 행을 그대로두고 빈 행을 표시합니다.

filterOptions를 사용해 보았지만 이러한 필터링을 수행하는 올바른 구문을 알아낼 수 없습니다. 나는 그것을 설정하는 방법에 대한 좋은 문서를 찾을 수 없었다.

나는 ng-repeat=\"row in renderedRows\"에 필터를 추가하려고 시도하여 NG 그리드 소스에서 gridTemplate을 수정하려고 시도했으나 작동하지도 못했습니다.

일시적으로 행을 제거하여 배열 자체를 수정할 수 있다고 생각하지만 행을 다시 표시 할 수 있어야하므로이 방법을 사용하지 않는 것이 좋습니다 (실제 확장자입니다. 하위 행을 숨기거나 표시해야 함)

출처

2013-08-27 Klas Mellbourn

SO 16546678 (http://stackoverflow.com/questions/16846678/nggrid-multi-column-filtering)을 보셨습니까? gridOptions.data 객체를 다시 만들어서 숨기는 것이 아니라 행을 필터링하는 것입니다. 또한 plunker가 있습니다 : http://plnkr.co/edit/2RXlNq?p=preview – AardVark71

@ AardVark71 데이터 객체의 복사본이 여러 개있는 것을 피하고 싶습니다. 한 가지 들어 http://stackoverflow.com/questions/17847119/how-to-hide-rows-in-ng-grid 그 솔루션과 메모리 누수가 의미합니다. –

별도의 배열로 데이터의 다른 사본이 필요하지 않습니다. 다시 말하지만 $ scope.data 대신 $ scope.filteredData()에 바인드하여 데이터를 필터링하는 함수에 바인드 할 수도 있습니다. Angular가 다이제스트를 실행할 때마다 호출됩니다. –

조건부로 템플릿의 행 높이를 isVisible을 기준으로 '0'으로 설정하거나 ng-class와 함께 CSS 클래스를 사용하십시오. 원하는 효과를 얻을 때까지 CSS로 재생 한 다음 템플릿에서 사용할 수 있습니다.

높이와 CSS 애니메이션을 실제로 사용하면 애니메이션 스타일로 열리고 닫히는 이점이있는 유형의 소리가 들립니다. jsFiddle 샘플을 가지고 있다면 기꺼이 도와 드리겠습니다.

편집 : 그리드가 실제로 레이아웃 방법을 찾고 후 그것의 행 (절대 위치) 당신 만 정말 내가 생각할 수있는 두 가지 옵션이 있습니다

1) 함수를 통해 그리드에 바인딩되는 데이터를 필터링을 dataVisible()처럼 전체 데이터 목록을 내부적으로 컨트롤러에 보관하여 쉽게 표시/숨길 수 있습니다.

2) 찾고있는 필터링 기능으로 ng-grid 프로젝트에 패치를 제출하거나 포크하십시오. 상자 밖에서는이 시나리오를 지원하지 않습니다.

출처

2013-08-27 05:00:36

높이를 '0'으로 설정해도 아무 것도하지 않았습니다. rowTemplate의 모든 요소에 설정했지만 행은 계속 표시됩니다. rowTemplate의 모든 요소에서 ng-hide = 'true'로 설정하면 행의 내용이 숨겨 지지만 빈 행은 계속 표시됩니다. –

그래, ng-grid를보고 있는데 각 열의 위치를 절대적으로 지정하는 것처럼 보이므로 다음 열은 "top"속성을 갖기 때문에 스택하지 않습니다. 유일한 옵션은 데이터 목록에서 항목을 필터링하는 것입니다. 아마도 "dataVisible"목록 또는 심지어 "dataVisible()"함수를 만들어야하지만, 전체 목록을 내부적으로 유지하면 쉽게 표시하거나 숨길 수 있습니다. –

특정 행을 숨기기 위해 ng-grid를 얻는 방법

답변

관련 문제