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

标签 dart ng-repeat angular-dart

是否可以将ng-repeat外部作用域中的属性,方法或函数用作列表表达式?当然可以访问 Controller 的作用域,但是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)">

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

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

有任何想法吗?也许替代方法?

最佳答案

在angular中有一个排序过滤器,称为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();
  }
}

关于dart - 如何从AngularDart中的ng-repeat范围访问组件的属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22793177/

相关文章:

dart - 使用Dart gcloud API连接到gcd数据存储

angularjs - 在 Set 上使用 ng repeat

angularjs - 使用索引位置验证字段

dart - 如何使用 AngularDart 根据类型和名称进行依赖注入(inject)?

dart - 如何安装 Dart v2?

flutter - 将 onTapUp 事件与 Inkwell 结合使用

dart - CupertinoTabBar 阻止当前选项卡底部如何避免这种情况还是默认行为

angularjs - 自定义指令(如 ng-repeat)

dart - 在组件中绑定(bind)新类型,以便子组件可以注入(inject)它们

dart - 无法在我的聚合物组件中查询选择器