how to filter data on a table with angularjs

Question

So, I have this table that displays users taken from a server in angularjs. Here is the users object:

'users'= [
          {
            "name":"Jane Doe",
            "gender":"female",
            "role":"admin"
          },
          {
            "name":"John Doe",
            "gender":"male",
            "role":"owner"
          }
   ]

Here is the table that displays this data:

    <div class="col-md-4">
    <h3>Filter by user role</h3>    
    <select class="form-control" ng-model="roleOrder">
            <option 
                ng-repeat="user in users" 
                value="{{user.role}}">{{user.role}}</option>
    </select>
</div>

<table class="table table-bordered">
    <thead>
        <th>Name</th>
        <th>Gender</th>
        <th>role</th>
    </thead>
    <tbody>
        <tr ng-repeat="user in users | filter:{role: roleOrder}">
            <td>{{user.name}}</td>
            <td>{{user.gender}}</td>
            <td>{{user.role}}</td>
        </tr>   
    </tbody>
</table>

The problem is, when the page loads, nothing gets displayed until I select a role from the dropdown to filter the users.

My goal is to have all the users displayed initially, and then to filter the users by their roles once their corresponding role is selected in the option select dropdown.

Is there a better way than the one I'm attempting? Or how do I do it right? Thanks for any ideas

Is your users data being fetched through an async call?

Sreekanth
– Sreekanth

2016-11-24 22:31:03 +00:00
Commented Nov 24, 2016 at 22:31 — Sreekanth
– Sreekanth, Commented Nov 24, 2016 at 22:31

Community · Accepted Answer · 2017-05-23 12:24:30Z

6

You can add function for it like here AngularJS custom filter function

In js file

$scope.predicate = function( roleOrder ) {
  return function( item ) {
    return !roleOrder || item.role === roleOrder;
  };
};

And in html

 <tr ng-repeat="user in users | filter:predicate(roleOrder)">
        <td>{{user.name}}</td>
        <td>{{user.gender}}</td>
        <td>{{user.role}}</td>
 </tr>

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Nov 24, 2016 at 22:29

pato

9086 silver badges10 bronze badges

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

Comments

Ajaykumar · Accepted Answer · 2016-11-24 22:46:23Z

1

user data is displaying when page loads, its working fine. Can you check the below link.

http://plnkr.co/edit/FwqivguAcyLnqxKVWEC6?p=preview

 $scope.users= [
          {
            "name":"Jane Doe",
            "gender":"female",
            "role":"admin"
          },
          {
            "name":"John Doe",
            "gender":"male",
            "role":"owner"
          }
   ]

Is this you expectation, it not please explain it briefly. Check whether the data from server binds in $scope when the page loads

answered Nov 24, 2016 at 22:46

Ajaykumar

4165 silver badges16 bronze badges

Collectives™ on Stack Overflow

how to filter data on a table with angularjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related