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

Question

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

nikjohn · Accepted Answer · 2016-09-19 09:29:25Z

2

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

edited Sep 19, 2016 at 9:29

answered Sep 19, 2016 at 9:06

nikjohn

22.1k16 gold badges58 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

20 Comments

Phoenix Over a year ago

Am I supposed to create that controller?

Phoenix Over a year ago

Im new to Angular and Im still learning. So not sure if I should make a controller just for filtering. I tried it without the controller by just adding "filter:"employee.state.state == 'Available' || employee.state.state == 'Rejected'" to the <td>. But that didnt help :(

nikjohn Over a year ago

No you don't need to create the controller. I just made that so that I have some data to play with. I've updated the snippet btw. This should work

nikjohn Over a year ago

Will show you an example for a custom filter as well

nikjohn Over a year ago

Nah, it happens to the best of us. Glad to be of help!

|

Collectives™ on Stack Overflow

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

1 Answer 1

20 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

20 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related