2014-04-01 3 views
2

ng-repeat의 외부 범위에있는 속성, 메소드 또는 기능을 목록 표현식으로 사용할 수 있습니까? 물론 컨트롤러 범위에 액세스 할 수 있지만 ng-repeat 지시문을 둘러싼 구성 요소는 무엇입니까?AngularDart의 ng-repeat 범위에서 구성 요소의 속성에 액세스하는 방법은 무엇입니까?

제 질문을 좀 더 명확하게 설명하고 싶습니다.

현재 JSF 데이터 테이블 (또는 AngularPrime의 puiDatatable과 유사)을 닮은 구성 요소를 작성하려고합니다 (http://angularprime.appspot.com/#/puiDatatable/sortSelection 참조). HTML 코드는 지금과 같은 : 이미 구성 요소의 알맞은 버전을 작성하는 관리했습니다

<pui-datatable> 
    <pui-row ng-repeat="row in ctrl.carTable" > 
     <pui-column header="Brand" sortable="true">{{row.brand}}</pui-column> 
     <pui-column header="Type">     {{row.type}} </pui-column> 
     <pui-column header="Year" sortable="true">{{row.year}} </pui-column> 
     <pui-column header="Color" sortable="true">{{row.color}}</pui-column> 
     <pui-column header="edit"> 
      <button ng-click="row.editCar()">edit car</button> 
     </pui-column> 
    </pui-row> 
    </pui-datatable> 

. 그러나 정렬 기능을 구현하기가 어려웠습니다. 간단한 아이디어과 같이, 함수 호출과 NG 반복의 목록 식을 포위하는 것입니다

<pui-row ng-repeat="row in sort(ctrl.carTable)"> 

또는

<pui-row ng-repeat="row in PuiDatatable.sort(ctrl.carTable)"> 

그러나 내가 전역 함수에 액세스 할 수 있도록하지 않는 것 또는 구성 요소 자체의 인스턴스 기능은 물론 구성 요소의 정적 함수.

내 생각에 지금까지 필터를 사용하는 것이 가장 좋지만 어색합니다.

아이디어가 있으십니까? 어쩌면 양자 택일 접근? 당신이 NgFilter 주석을 사용하여 사용자 정의 필터를 구축하려는 경우

<pui-datatable> 
     <pui-row ng-repeat="row in ctrl.carTable | orderBy:'brand'" > 
      <pui-column header="Brand" sortable="true">{{row.brand}}</pui-column> 
      <pui-column header="Type">     {{row.type}} </pui-column> 
      <pui-column header="Year" sortable="true">{{row.year}} </pui-column> 
      <pui-column header="Color" sortable="true">{{row.color}}</pui-column> 
      <pui-column header="edit"> 
      <button ng-click="row.editCar()">edit car</button> 
      </pui-column> 
     </pui-row> 
    </pui-datatable> 

가 :

@NgFilter(name:'sort') 
class Sort{ 
    call(valueToFilter, optArg1, optArg2) { 
    return valueToFilter.sort(); 
    } 
} 

답변

1

orderBy라는 각도에서 정렬 필터가있다 서투르지 만 작동하는 솔루션에 관심이있는 현재 버전은 다음과 같습니다.

/** The puiSortFilter sorts a ng-repeat list according to the sort order of the puiDatatable */ 
    @NgFilter(name: 'puiDatatableSortFilter') 
    class PuiDatatableSortFilter { 
    /** AngularDart's orderBy filter sorts a list by a column name (which is given as a String) */ 
     OrderByFilter _orderBy; 

     PuiDatatableSortFilter(Parser parser){ 
     _orderBy=new OrderByFilter(parser); 
     } 

     /** PuiFilters aren't bound to a particular component, so every PuiDatatable registers itself to the filter in order to link filters and table */ 
     static Map<String, PuiDatatableComponent> tables = new Map<String, PuiDatatableComponent>(); 

     /** PuiFilters aren't bound to a particular component, so every PuiDatatable registers itself to the filter in order to link filters and table */ 
     static register(String name, PuiDatatableComponent puiDatatableComponent) { 
     tables[name]=puiDatatableComponent; 
     } 

     /** Finds out, which PuiDatatable is to be sorted, finds out, by which column and in which order it is to be sorted and delegates sorting the Angular's OrderByFilter */ 
     List call(List original, String tableName, [bool descending=false]) { 
     PuiDatatableComponent pui = tables[tableName]; 
     try 
     { 
      Column firstWhere = pui.columnHeaders.firstWhere((Column c) => c.sortDirection!=0); 
      return _orderBy.call(original, firstWhere.varName, firstWhere.sortDirection==2); 
     } 
     catch (notSortedException) 
     { 
      return original; 
     } 
     } 
    } 

하지만 전역 변수에 구성 요소를 등록해도 "다트 (Dart)"라는 느낌이 들지 않습니다.

+0

쿨! 그게 내 문제의 좋은 부분을 해결합니다 (범위에 대한 나의 질문에 대답하지는 않지만 재미있을 수도 있음). –

+0

그러나 "orderBy"매개 변수를 변수로 만들고 싶습니다. datatable 구성 요소에서 정렬 기준 및 순서를 선택해야합니다. 이것이 가능한가? –

+0

네, 가능하다고 생각합니다. ng-repeat = "row in ctrl.carTable | orderBy : ctrl.orderColumn"시도 했습니까? 컨트롤러의 attr 'orderColumn이 변경되면 행을 재정렬하고 다시 표시해야합니다. –

0

이런 경우에 누군가가

관련 문제