Question

我有一个从数据库返回的动态数据集，我试图创建一个通用表，无论列数或行数如何，都可以列出它。

它工作正常，但我遇到的问题是我希望能够隐藏一些列，例如ID。

这就是数据的样子：

scope.columns = [
    {
        'Name': 'ID',
        Visible: false,
    },
    {
        'Name': 'Name',
        Visible: true,
    },
    {
        'Name': 'Description',
        Visible: true,
    },
];

scope.rows = [
    {
        ID: 1, // should be hidden because ID column above is set to Visible - false
        Name: 'Test',
        Description: 'Its a test',
    },
    {
        ID: 2, // should be hidden because ID column above is set to Visible - false
        Name: 'Test 2',
        Description: 'Its a test 2',
    }
];

这是HTML代的table：

<table class="table">
    <!-- This part works fine and doesn't show some of the columns -->
    <tr>
        <th ng-repeat="column in columns | filter: { Visible: 'true'}">
            <span ng-bind="column.Name"></span>
        </th>
    </tr>
    <tr ng-repeat="row in rows">
        <td ng-repeat="col in row"> <!-- This is the part where I need filter the cols based on the column.Visible above -->
            {{col}}
        </td>
    </tr>
</table>

我尝试在<td>上添加过滤器，但我不确定如何根据scope.columns数组进行过滤。

Answer 1

您可以使用ng-if - ＆gt;进行此操作在您的案例中ng-if="columns[$index].Visible"，例如 DEMO FIDDLE 。您$scope.rows中的属性顺序必须与$scope.columns中的属性顺序相同才能确保其正常工作。

<div ng-controller="MyCtrl">
  <table class="table">
    <!-- This part works fine and doesn't show some of the columns -->
    <tr>
      <th ng-repeat="column in columns | filter: { Visible: true}">
        <span ng-bind="column.Name"></span>
      </th>
    </tr>
    <tr ng-repeat="row in rows">
      <td ng-repeat="col in row" ng-if="columns[$index].Visible">
        {{col}}
      </td>
    </tr>
  </table>
</div>

如何使用ng-repeat和filter来隐藏动态表中的某些列？

1 个答案: