Как фильтровать строки в AngularJS на основе данных, в частности, «тд»

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. Blocked 5. Принимается 6. Отклонено 7. Тень

Я хочу таблицу только для отображения состояния Доступно и 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'); 
     } 
    }); 

}]); 

Может кто-нибудь помочь мне с созданием жесткого закодированное фильтра в таблице, которая будет показывать только те два государства?

Спасибо

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'}"> 

Самый простой способ сделать это, как и выше.

Вы также можете написать свой собственный фильтр, как показано в фрагменте