Question

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

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

$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 1}}过滤器，以及带有netWorth过滤器的最后一列currency属性。

我的思维过程将是这样的：

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

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

有什么想法吗？

Answer 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

Answer 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

不同的表列上的不同筛选器

2 个答案:

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