Question

我有一个表格过滤器，根据用户参数显示内容，这是完美的工作，但现在我想让用户根据每一列进行过滤。

这就是问题所在：

当您在文本输入上键入“用户”时（按列筛选“我只想显示”用户列“，如果您键入”开始日期“，则只显示”开始日期列“我想知道这是否可以使用过滤器选项或如何处理此要求。

这是我的代码：

<div class="col-xs-10 grid-container">
    <div class="row form-entry">
        <div class="col-xs-3 input-container">
            <input type="text" placeholder="Search in Grid" ng-model="searchFills"/>
        </div>
        <div class="col-xs-3 input-container">
            <input type="text" placeholder="Filter by columns" />
        </div>
    </div>
    <div class="col-xs-10 grid-container">
        <div class="generic-grid">
            <table class="table-bordered grid-table table-hover">
                <thead>
                <tr>
                    <th>id</th>
                    <th>User</th>
                    <th>Alt User</th>
                    <th>Creation Date</th>
                    <th>Start Date</th>
                    <th>Recieved Date</th>
                    <th>1</th>
                    <th>2</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="fill in fills_list | filter:searchFills">

                    <td>
                        {{fill.id}}
                    </td>
                    <td>
                        {{fill.user}}
                    </td>
                    <td>
                        {{fill.useralt}}
                    </td>
                    <td>
                        {{fill.creationdate}}
                    </td>
                    <td>
                        {{fill.startdate}}
                    </td>
                    <td>
                        {{fill.recieveddate}}
                    </td>
                    <td>
                    </td>
                    <td>

                    </td>
                </tr>
                </tbody>
            </table>
           </div>
         </div>

Answer 1

您可以将ng-model="columnFilter"添加到input：

<input type="text" placeholder="Filter by columns" `ng-model="columnFilter"` />

然后将ng-hide="columnFilter == 'Start Date'"添加到<td>{{fill.user}}</td>

将ng-hide="columnFilter == 'User'"添加到<td>{{fill.startdate}}</td>

并将ng-hide="columnFilter == 'User' || columnFilter == 'Start Date'"添加到<td>的剩余部分。

Answer 2

如果要按列过滤，则需要按列进行ng-repeat。之后，您可以使用与过滤行相同的过滤器

<强> controller.js

controllers.controller("MainController", ["$scope", function($scope) {
    return ["$scope", function ($scope) {
        $scope.columns = [{
            title: "id",
            alias: "id"
        }, {
            title: "User",
            alias: "user"
        }, {
            title: "Alt User",
            alias: "useralt"
        }, {
            title: "Creation Date",
            alias: "creationdate"
        }, {
            title: "Start Date",
            alias: "startdate"
        }, {
            title: "Recieved Date",
            alias: "recieveddate"
        }];
    }]);

<强> template.html

<div ng-controller="MainController">
    <div class="col-xs-10 grid-container">
        <div class="row form-entry">
            <div class="col-xs-3 input-container">
                <input type="text" placeholder="Search in Grid" ng-model="searchFills" />
            </div>
            <div class="col-xs-3 input-container">
                <input type="text" placeholder="Filter by columns" ng-model="searchColumn" />
            </div>
        </div>
        <div class="col-xs-10 grid-container">
            <div class="generic-grid">
                <table class="table-bordered grid-table table-hover">
                    <thead>
                        <tr>
                            <th ng-repeat="column in columns | filter:searchColumn">{{column.title}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="fill in fills_list | filter:searchFills">
                            <td ng-repeat="column in columns | filter:searchColumn">{{fill[column.alias]}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

这将过滤表格中的任何列。

AngularJS排序表列

2 个答案: