CODEWITHSUNDEEP
angularjssmart-table
Leeuwtje
Leeuwtje

Reputation: 2261

how can I filter a table by column?

I am trying to filter a table by column, this is the table:

<tr ng-repeat="row in rowCollection | filter: { person.lastName : lastName}">
        <td>{{row.person.firstName}}</td>
        <td>{{row.person.lastName}}</td>
        <td>{{row.person.birthDate | date:'shortDate'}}</td>
        <td>{{row.person.balance}}</td>
        <td>{{row.person.email}}</td>
</tr>

The data looks like this:

$scope.rowCollection = [
              {person:{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'}},
              {person:{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'}},
              {person:{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'}}
];

How can I filter by column in this case last name? I can't get it to work when the json has more than 1 level. plunkr: http://plnkr.co/edit/AFSoGw?p=preview

Upvotes: 1

Views: 3070

Answers (3)

Manuel Miranda
Manuel Miranda

Reputation: 823

You should add that level to your search query's model, so the ng-model for the query input should be person.lastName

filter on lastname: <input type="text" ng-model="person.lastName">
    <h3>Basic Smart-Table Starter</h3>
    <table st-table="rowCollection" class="table table-striped">
        <thead>
          <tr>
              <th>first name</th>
              <th>last name</th>
              <th>birth date</th>
            <th>balance</th>
            <th>email</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in rowCollection | filter: {'person':person}">
            <td>{{row.person.firstName}}</td>
            <td>{{row.person.lastName}}</td>
            <td>{{row.person.birthDate | date:'shortDate'}}</td>
            <td>{{row.person.balance}}</td>
            <td>{{row.person.email}}</td>
        </tr>
        </tbody>
    </table>

See this updated plunker

Upvotes: 2

Alhuck
Alhuck

Reputation: 1029

Just have,

ng-repeat="row in rowCollection | filter: lastName"

it will filter your full array based on the value given by the user.

PLUNKER

Upvotes: 0

Jhey
Jhey

Reputation: 1377

In order to filter by lastName you can simply update the filter call to reflect that with

<tr ng-repeat="row in rowCollection | filter:lastName">

This will filter rowCollection by lastName.

But if you want a stricter filter on specifically the last name I believe you'll be looking to define a more precise filter for your application. Something like filterByLastName, that will loop through the items and check through items which items have a last name matching that name.

Something along the lines of the following;

.filter('filterByLastName', function () {
  return function(items, lastName) {
    var filtered = [];
    if (lastName) {
      for (var i = 0; i < items.length; i++) {
        if (items[i].lastName === lastName) {
          filtered.push[items[i]];
        }
      }
    } else {
      filtered = items;
    }
    return filtered;
  }
})

Hope that helps you out!

Upvotes: 0

Related Questions