对 Angular 表应用排序和过滤

Question

我下载了一个 Angular 演示应用程序来学习和学习 Angular 基础知识。我在对数据表应用过滤器和排序时遇到问题。我参考了一些例子，不确定是否正确。

我的桌子是：

<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="'empno'" filter="{ 'empno': 'text' }">
{{employee.employee.employeeNo}}
</td>
<td data-title="'First Name'" sortable="'employee.employee.firstName'" filter="{ 'employee.employee.firstName': 'text' }">
                            {{employee.employee.firstName}}
                        </td>
  </tr>
                </table>

            </div>

控制器：

myApp.controller('getAllBenchersController', ['$scope', 'employeeTalentPoolServices', function ($scope, employeeTalentPoolServices) {
    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

因此，为了解释您的演示示例，我创建了一个类似的示例，让您了解您的问题中发生了什么。

我们有一个不同状态的员工数据，所以当我想显示员工列表时，我只想显示“公平”和“好”，所以我编写了一个传递给 filter 指令的过滤函数来告诉哪些项目应该从列表中显示出来。

如果您观察该功能，它会从列表中获取每个项目并检查状态以匹配所需的显示状态。

查看演示，希望这能让您清楚地了解演示应用中发生的情况。

var app = angular.module('app',[]);
app.controller('getAllBenchersController',function($scope,$filter){
  
  $scope.data = {employee:[
    
    {'no':1,'name':'max','status':'bad'},
    {'no':2,'name':'fox','status':'good'},
    {'no':3,'name':'juno','status':'bad'},
    {'no':4,'name':'pet','status':'fair'},
    {'no':5,'name':'xyz','status':'good'},
    {'no':6,'name':'shit','status':'bad'},
    {'no':7,'name':'doggy','status':'fair'},
    {'no':8,'name':'hmmm','status':'bad'} 
  ]}
  
  //this test filter is a function which allows me to decide which data should be displayed in this case I've used 'fair' & 'good' status employees to be displayed...
  $scope.testFilter = function (item) {
            return (item.status.toLowerCase() === 'good' || item.status.toLowerCase() === 'fair');
        };
   
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" class="widget-content" ng-controller="getAllBenchersController">

                <table>
          <tr ng-repeat="emp in data.employee | filter: testFilter">
                      <td>{{$index+1}} </td>
                      <td> {{emp.no}}</td>
                      <td>{{emp.name}} </td>
  </tr>
                </table>

            </div>