Question

我有一个表格，我希望在每个表格标题下面都有一个输入框来过滤其对应的列。所以我有两个问题：1。在thead标签之间，如何使用“header”变量作为封闭ng模型的值？ 2.在tbody标签之间，在过滤器的ng-repeat中指定列名的最佳方法是什么（filter：{column_name：model_name}）？

<table class="table table-striped table-bordered">
    <thead>
        <th ng-repeat="header in tableHeaders">{{header}}<a ng-click="sort_by(header);"></a>
            <div>
                <input type="text" ng-model="search" ng-change="filter()" class="form-control"/> <!-- value for ng-model should match header variable in enclosing ng-repeat -->
            </div>
        </th>
    </thead>
    <tbody>
        <tr ng-repeat="data in filtered = (list | filter:{ Status: search} | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"> <!-- "Status" should be corresponding column header -->
            <td ng-repeat="header in tableHeaders">{{data[header]}}</td>
        </tr>
    </tbody>
</table>

tableheaders是在控制器中声明的数组：

$scope.tableHeaders = ['Environment', 'Server', 'Name', 'Status'];

Answer 1

假设您的tableHeader值与他们关联的变量名称相匹配，请将search对象设为ng-model="search[header]"，将过滤器设为filter: search。请记住，这些是“ands”而非“ors”，因此它匹配搜索对象的所有属性，这可能会影响您希望如何使用该搜索对象。也许在标题ng-click中将其重置为null。

<table class="table table-striped table-bordered">
    <thead>
        <th ng-repeat="header in tableHeaders">{{header}}<a ng-click="sort_by(header);"></a>
            <div>
                <input type="text" ng-model="search[header]" ng-change="filter()" class="form-control"/> <!-- value for ng-model should match header variable in enclosing ng-repeat -->
            </div>
        </th>
    </thead>
    <tbody>
        <tr ng-repeat="data in filtered = (list | filter: search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit"> <!-- "Status" should be corresponding column header -->
            <td ng-repeat="header in tableHeaders">{{data[header]}}</td>
        </tr>
    </tbody>
</table>

Angular - 表格的多列过滤器

1 个答案: