CODEWITHSUNDEEP
javascriptangularjsfilter
user2204319
user2204319

Reputation: 23

Angular translate and filtering over table

I have a simple table with search -

<table>
  <thead>
    <tr>
      <th> Name </th>
      <th> Lastname </th>
      <th> Job Title </th>
    </tr>
   </thead>
  
  <tbody>
    <tr data-ng-repeat="data in ctrl.data | filter : searchQuery">
      <td>{{data.name}}</td>
      <td>{{data.lastname}}</td>
      <td>{{data.jobtitle | translate}}</td>
    </tr>  
  </tbody>
</table>

<input type="text" data-ng-model="searchQuery"/>

Since job title is translated - search works only with original value - so yes with "Developer" but no with any translation of this.

Is there is any possibility to make it work with translations too?

Upvotes: 0

Views: 747

Answers (1)

jbrown
jbrown

Reputation: 3025

You can create a filter to handle the translation

Filter

app.filter('translateFilter', function($translate) {
  return function(input, param) {
    if (!param) {
      return input;
    }
    var searchVal = param.toLowerCase();
    var result = [];
    angular.forEach(input, function(item) {
      var translated = $translate.instant(item.jobtitle);
      if (translated.toLowerCase().indexOf(searchVal) > -1) {
        result.push(item);
      }
    });
    return result;
  };
});

And use it like this:

HTML

<tr data-ng-repeat="data in ctrl.data | translateFilter:searchQuery">

Upvotes: 1

Related Questions