Question

我在AngularJS中有一张桌子，我正在尝试学习 SortBy 和过滤器选项。

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

我目前的表是：

<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>

在上表中，我希望基于以下内容完成过滤：

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

{{employee.state.state}}返回多个值。它们可以是以下任何一种： 1.可用 2.辞职 3. OnNotice 4.被阻止 5.接受 6.拒绝 7.暗影

我希望表格只显示可用状态和已阻止状态..

我的控制器是：

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

}]);

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

谢谢

Answer 1

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

最简单的方法就像上面那样。

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

所示

如何根据特定'td'

1 个答案: