Phoenix Phoenix - 2 months ago 6
AngularJS Question

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

I have a table made in AngularJS and I am trying to learn SortBy and Filter options.

I want to sort the table based on data in a particular TD. I don't want to filter by inputting a filter manually, but I want to hardcode that filter to the table.

My current table is :

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


In the above table, I want the filtering to be done based on the :

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


{{employee.state.state}}
returns several values. They can be any one of the following :
1. Available
2. Resigned
3. OnNotice
4. Blocked
5. Accepted
6. Rejected
7. Shadow

I want the table to only display the states Available and Blocked..

My Controller is:

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

}]);


Can anyone help me with creating a hard coded filter in the table that will show only those two states?

Thank You

Answer

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

The simplest way to do this is like above.

You can also write your own filter, as shown in the snippet