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

我有一个从数据库返回的动态数据集，我正试图为其创建一个通用表，该表始终可以列出它，而不管列数或行数如何

它工作得很好，但我遇到的问题是，我希望能够隐藏一些列，例如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 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>


{{col}}

我尝试在
上添加一个过滤器，但我不确定如何基于
作用域.columns
数组进行过滤。
您可以使用
ng if
->
ng if=“columns[$index].Visible”
在您的示例中，如本中所示。您在
$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>


{{col}}
太好了，谢谢。我完全忘记了
$index
@Apostrofix很高兴能帮助你。