如何根据特定 'td' 中的数据过滤 AngularJS 中的行

Question

我在 AngularJS 中制作了一个 table，我正在尝试学习 SortBy 和 Filter 选项.

我想根据特定 TD 中的数据对 table 进行排序。我不想通过手动输入过滤器来过滤，但我想将该过滤器硬编码到 table.

我目前的 table 是：

<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="'First Name'" sortable="'employee.employee.firstName'" filter="{ 'employee.employee.firstName': 'text' }">
            {{employee.employee.firstName}}
        </td>
        <td data-title="'Last Name'" sortable="'employee.employee.lastName'" filter="{ 'employee.employee.lastName': 'text' }">
            {{employee.employee.lastName}}
        </td>
        <td data-title="'Current State'" sortable="'currentState'" filter="{ 'currentState': 'text' }">
            {{employee.state.state}}
        </td>
        <td data-title="'Reserve to (state):'" ng-if="employee.state.state == 'Available' ">
            <select>
                <option disabled selected value> -- select an option -- </option>
                <option id="123">123</option>
                <option id="234">234</option>
                <option id="345">345</option>
                <option id="456">456</option>
                <option id="567">567</option>
            </select>
        </td>
    </tr>
</table>

在上面的table中，我希望根据 :

进行过滤

<td data-title="'Current State'" sortable="'currentState'" filter="{ 'currentState': 'text' }">
    {{employee.state.state}}
</td>

{{employee.state.state}}returns几个值。它们可以是以下任何一项： 1.可用 2.辞职 3.通知 4. 封锁 5.接受 6. 拒绝 7. 阴影

我希望 table 仅显示状态 Available 和 Blocked..

我的控制器是：

'use strict';

angular.module('employeeTalentPool', []);

//Routers
myApp.config(function ($stateProvider) {
    $stateProvider.state('employeeTalentPool', {
        url: '/employeeTalentPool',
        templateUrl: 'partials/talentPoolEmployees/employeeTalentPool.html',
        data: {
            auth: true
        }
    });

});

//Factories
myApp.factory('employeeTalentPoolServices', ['$http', function ($http) {

    var factoryDefinitions = {
        //getAllBenchers: function () {
        //    return $http.get(myApp.TalentPoolBaseUrl + '/EmployeeState?state=Available&pageNumber=1&pageSize=5').success(function (data) { return data; });
        //            },
        getAllBenchers: function () {
            return $http.get(myApp.TalentPoolBaseUrl + '/EmployeeState?state=&pageNumber=0&pageSize=0').success(function (data) { return data; });
                     },
        reserveEmployee: function () {
            return $http.post('').success(function (data) { return data;});
        }


    }

    return factoryDefinitions;
}
]);

//Controllers

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() === 'rejected');
        }
    });

}]);

任何人都可以帮助我在 table 中创建一个仅显示这两个状态的硬编码过滤器吗？

谢谢

Answer 1

angular.module("testApp", [])
  .controller("testController", function testController($scope) {

    $scope.data = [{
      state: {
        state: 'Available'
      }
    }, {
      state: {
        state: 'Available'
      }
    }, {
      state: {
        state: 'Misc'
      }
    }, {
      state: {
        state: 'Rejected'
      }
    }, {
      state: {
        state: 'Available'
      }
    }, {
      state: {
        state: 'Abc'
      }
    }, ];
    $scope.testFilter = function(item) {
      return (item.state.state.toLowerCase() === 'available' || item.state.state.toLowerCase() === 'rejected');
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-table="talentPoolList" show-filter="true" class="table table-striped table-bordered" ng-controller="testController" ng-app="testApp">
  <tr ng-repeat="employee in data | filter: testFilter">
    <td>{{employee.state.state}}</td>
  </tr>
</table>

 <tr ng-repeat="employee in data | filter: {state: 'Available'}">

最简单的方法如上。

您也可以编写自己的过滤器，如代码段所示

如何根据特定 'td' 中的数据过滤 AngularJS 中的行

How to filter a row in AngularJS based on data in a particular 'td'

datatable

angularjs

angularjs-filter