javascript - 过滤 Angular Table td 的问题

Question

我有一个用 angularJS 创建的表。

HTML:

<div class="widget-content" ng-controller="getAllBenchersController">
    <table ng-table="talentPoolList" show-filter="true"
            class="table table-striped table-bordered">
        <tr ng-repeat="employee in $data" | filter: testFilter">
            <td data-title="'#'">{{$index + 1}}</td>
            <td data-title="'Employee ID'" sortable="'employee.employeeNo'"
                    filter="{ 'employee.employeeNo': 'text' }">
                {{employee.employee.employeeNo}}
            </td>
            <td data-title="'Current State'" sortable="'state.state'" filter="{ 'state.state': 'text' }" 
                    ng-class="{ red: employee.state.state == 'Available', blue: employee.state.state == 'Blocked'}">
                {{employee.state.state}}            
            </td>
        </tr>
    </table>
</div>

在<td data-title="'Current State'">我想应用过滤器。我只想显示返回值“可用”和“已阻止”的状态。

我的 Controller 是:

myApp.controller('getAllBenchersController', ['$scope', 'employeeTalentPoolServices', 'dataTable', '$window', '$timeout', function ($scope, employeeTalentPoolServices, dataTable, $window, $timeout) {
    employeeTalentPoolServices.getAllBenchers().then(function (result) {
        $scope.data = result.data;
 $scope.testFilter = function (item) {
            return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'blocked');
        }
});

这些状态通常会返回值 -“可用”、“已阻止”、“已开票”和“已拒绝”。我希望表格只显示状态 - “可用”和“已阻止”。请检查并指出我做错了什么。

Answer 1

如果您只想显示状态为“可用”和“已阻止”的项目，我认为最好的选择是在 ng-repeat 中应用 Angular 过滤器。通过这种方式，ng-repeat 只计算表格所需的项目。

您可以添加一个新的过滤器，例如:

myApp.filter('filterState',
  [], function() {
      return function(items) {
        return items.map(function(obj) {
          if (obj.state === 'available' || obj.state === 'blocked')
             return obj;
        });
});

之后，您的 div 元素应该是:

<tr ng-repeat="employee in $data" | filter: filterState">