CODEWITHSUNDEEP
dartangularjs-ng-repeatangular-dart
Stephan Rauh
Stephan Rauh

Reputation: 3160

How to access a component's attributes from ng-repeat scope in AngularDart?

Is it possible to use attributes, methods or functions from an outer scope of ng-repeat as list expression? Of course it's possible to access the controller's scope, but what about the components surrounding the ng-repeat directive?

I'd like to elaborate things to make my question more clearly.

Currently I'm trying to write a component resembling a JSF datatable (or similar to the puiDatatable of AngularPrime, see http://angularprime.appspot.com/#/puiDatatable/sortSelection). The HTML code looks like so:

 <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>

I've already managed to write a decent version of the component. However, I found it difficult to implement the sort functionality. The simplest idea is to surround the list expression of ng-repeat with a function call, like so:

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

or

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

However I don't seem to be able to access global functions or static functions of the component, let alone functions of the instance of the component itself.

My best guess so far is to use a filter, but it's clumsy.

Any ideas? Maybe alternative approaches?

Upvotes: 2

Views: 461

Answers (2)

Stephan Rauh
Stephan Rauh

Reputation: 3160

Just in case someone is interested in a clumsy but working solution, here's my current version:

/** 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;
        }
      }
    }

But I can't help it, registering components in a global variable doesn't feel the "Dart" way.

Upvotes: 0

Ozan
Ozan

Reputation: 4415

There is a sorting filter in angular, called orderBy:

<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>

When you want to build a custom Filter you use the NgFilter annotation:

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

Upvotes: 1

Related Questions