Question

下面是我的html结构，其中我显示了具有活动状态和非活动状态的行，并且选择了更改并且工作正常。

但是现在项目需求是变化的，状态可以是活动和非活动的更多，所以我希望应该根据行的状态创建选择选项，我将一些常见变量传递给行而不是像这样定义ng-hide="transStatus=='inactive'"

table{
  width:100%;
  border-collapse:collapse;
}
table tr td{
  padding:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="transactions_box">
    <div class="transactions_box_head clearfix">
        <h2>Transactions</h2>
    </div>
    <div class="transaction_selects">
        <select class="form-control" ng-init="transStatus==' '" ng-model="transStatus">
            <option value="">Select Action</option>
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
        </select>
    </div>
    <div class="transaction_table">
        <div class="table-responsive">
            <table cellpadding="0" cellspacing="0" border="1">
            <thead>
                <tr>
                    <th><div class="checkbox"><label><input type="checkbox" ng-model="allCheck"> Transaction ID</label></div></th>
                    <th>Date</th>
                    <th>Amount</th>
                    <th>Status</th>
                    <th>Voucher Type</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-hide="transStatus=='inactive'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Active</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='inactive'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Active</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='inactive'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Active</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='inactive'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Active</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='inactive'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Active</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='active'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Inactive</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='active'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Inactive</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='active'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Inactive</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='active'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Inactive</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='active'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Inactive</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='active'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Inactive</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='active'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Inactive</td>
                    <td>Purchased</td>
                </tr>
                <tr ng-hide="transStatus=='active'">
                    <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck"> 146319483164316</label></div></td>
                    <td>18/07/2016 11:25:56</td>
                    <td>100.00</td>
                    <td>Inactive</td>
                    <td>Purchased</td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>
</div>
</div>

Answer 1

我整理了一个使用Angular控制器和绑定显示方法的plunker。

以下是各个部分：

<强>的index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>Dynamic Table Filter Select</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="transactions_box">
    <div class="transactions_box_head clearfix">
        <h2>Transactions</h2>
    </div>
    <div class="transaction_selects">
        <select class="form-control" ng-options="filter as filter for filter in filterSet" ng-model="selectedFilter"></select>
    </div>
    <div class="transaction_table">
        <div class="table-responsive">
            <table cellpadding="0" cellspacing="0" border="1">
            <thead>
                <tr>
                    <th><div class="checkbox"><label><input type="checkbox" ng-model="allCheck"> Transaction ID</label></div></th>
                    <th>Date</th>
                    <th>Amount</th>
                    <th>Status</th>
                    <th>Voucher Type</th>
                </tr>
            </thead>
            <tbody ng-repeat="row in gridData">
              <tr ng-show="row.status===selectedFilter || selectedFilter === filterSet[0]">
                  <td><div class="checkbox"><label><input type="checkbox" ng-checked="allCheck "/>{{row.id}}</label></div></td>
                  <td>{{row.date}}</td>
                  <td>{{row.amount}}</td>
                  <td>{{row.status}}</td>
                  <td>{{row.voucherType}}</td>
              </tr>
            </tbody>
        </table>
        </div>
    </div>
</div>
  </body>

</html>

<强> app.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.gridData = [ //canned data for now.
                {
                    id:146319483164316,
                    date:'18/07/2016 11:25:56',
                    amount:100.00,
                    status:'Active',
                    voucherType:'Purchased'
                },
                {
                    id:146319483164316,
                    date:'18/07/2016 11:25:56',
                    amount:100.00,
                    status:'Active',
                    voucherType:'Purchased'
                },
                //...
                {
                    id:146319483164316,
                    date:'18/07/2016 11:25:56',
                    amount:100.00,
                    status:'Inactive',
                    voucherType:'Purchased'
                }
            ];

  $scope.filterSet = $scope.gridData.reduce(function(filters, item) {
    if(filters.indexOf(item.status) === -1) {
      filters.push(item.status)
    }
    return filters;
  },['Select Action']);

  $scope.selectedFilter = $scope.filterSet[0];
});

我的style.css与你的css相同。这是plunker所以你可以实时预览它： https://plnkr.co/edit/Y7jbsPWVPXSjAKbb6Kr4?p=preview

详细说明发生了什么，我现在将控制器中的数据硬编码为javascript对象。我猜你会从动态源中提取它，可能是在JSON中，将它放入javascript数组应该是非常简单的。填充后，我会创建过滤器选项。我（ab）使用Array.prototype.reduce来创建一个唯一值数组。目前没有涉及排序，所以它将是首先出现的“选择操作”提示的外观顺序。有几种方法可以做到这一点，重点是迭代数据并构建您的选项数组。

大部分工作都是通过ng-repeat指令和行模板完成的。我认为这是不言自明的，但是为了进一步阅读，你可以看一下：https://docs.angularjs.org/api/ng/directive/ngRepeat

你会看到我将你的ng-hide切换为ng-show。要么会工作，但我有一个“不（a）AND而不是（b）”类型表达式与ng-hide。这真的是一种风格偏好。它正在做的是获取row.status（由ng-repeat指令绑定），它与$ scope.gridData [x] .status相对应，并检查它是否与绑定的$ scope.selectedFilter匹配。

如果您尝试将某些状态更改为新内容，您会看到它们出现在选择下拉列表中，并且过滤按预期工作，无需进一步更改代码。

我想补充一个讨论点：如果您正在处理来自服务器的大量数据，您可能希望进行分页。如果是这样，您几乎肯定也想生成您的filterSet并执行实际的服务器端过滤。我会留下它，因为我认为详细讨论这个讨论的范围超出范围，但它会显着改变我解决问题的方式。

根据动态选项

1 个答案: