不同表列上的不同过滤器答案

【问题标题】：Different filters on different table columns不同表列上的不同过滤器
【发布时间】：2014-10-20 08:18:02
【问题描述】：

我想创建一个表格，其中列的数据根据不同的过滤器进行格式化。

假设我有一个如下所示的数组对象：

$scope.components = [
                     {lastName:'Bob', firstName:'John',netWorth:1000},
                     {lastName:'Foo', firstName:'Bar',netWorth:2000}
                   ];

现在我想使用ng-repeat 将数据填充到表中。这是我的做法：

            <tr ng-repeat="component in components">
              <td ng-repeat="column in tableColumns">
                {{component[column]}}
              </td>
            </tr>

上面的$scope.components 是一个简单的例子，但重点是我有这样的数据对象，它们的属性是一致的，但根据对象不同。这就是为什么我有第二个ng-repeat 允许用户定义tableColumns 内部的内容。在我们的例子中，tableColumns 是一个字符串数组：$scope.tableColumns = ['lastName','firstName','netWorth']。

表表现正常。主要问题是，如何使用特定过滤器格式化每个单独的列？说，对于表格的第一列，即lastName 属性，我想使用uppercase 过滤器对其进行格式化，表格的第二列，即firstName 属性与lowercase 过滤器，最后一列netWorth 属性与 currency 过滤器。

我的思考过程是这样的：

<td ng-repeat="column in tableColumn>
  {{component[column] | filterArray}}
</td>

其中$scope.filterArray 是我想要的过滤器字符串数组，例如'uppercase'、'currency' 等。这个字符串数组也应该与 tableColumn 数组中的元素一致。例如，要获得上述所需的格式，我必须将$scope.arrayFilter 声明如下：$scope.arrayFilter=['uppercase','lowercase','currency']

有什么想法吗？

【问题讨论】：

标签： angularjs angularjs-filter

【解决方案1】：

我认为您可以为将使用 $filter 服务的过滤器编写自己的过滤器。

因此，您的过滤器将如下所示：

app.filter('custom', ['$filter', function ($filter) {
  return function (value, type) {
    return $filter(type)(value);
  }
}]);

现在你可以通过下一个方式使用这个：{{value | custom : filterName}}，例如：

{{component[column] | custom : 'uppercase'}}

现在您只需要创建一个包含列名称及其过滤器名称的对象，如下所示：

  $scope.filterArray = {
    'lastName': 'uppercase',
    'firstName': 'lowercase',
    'netWorth': 'currency'
  };

所以现在您的 HTML 代码将如下所示：

<tr ng-repeat="component in components">
  <td ng-repeat="column in tableColumns">{{component[column] | custom : filterArray[column]}}</td>
</tr>

一切似乎都在演示中工作。希望对您有所帮助。

演示：http://plnkr.co/edit/fE02ZmaUWxeG9h71TabO?p=preview

【讨论】：

【解决方案2】：

你可以这样做：

<td ng-repeat="column in tableColumn>
  <label ng-if="column === 1">
     {{component[column] | uppercase}}
  </label>
  <label ng-if="column === 2">
     {{component[column] | lowercase}}
  </label>

...

</td>

或者你可以像你说的那样使用有序的arrayFilter来做到这一点

【讨论】：