Question

是否可以使用ng-repeat的外部范围中的属性，方法或函数作为列表表达式？当然可以访问控制器的范围，但是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-repeat的列表表达式，如下所示：

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

或

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

但是我似乎无法访问组件的全局函数或静态函数，更不用说组件本身实例的函数了。

到目前为止，我最好的猜测是使用过滤器，但它很笨拙。

有什么想法吗？也许是替代方法？

Answer 1

有一个角度排序过滤器，名为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>

如果要构建自定义过滤器，请使用NgFilter注释：

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

Answer 2

万一有人对笨拙但有效的解决方案感兴趣，这是我目前的版本：

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

但是我无法帮助它，在全局变量中注册组件并不会感觉到＆＃34; Dart＆＃34;办法。

如何从AngularDart中的ng-repeat范围访问组件的属性？

2 个答案: