Enhancing Tables with Angular for Dynamic Translation and Filtering

Question

Enhancing Tables with Angular for Dynamic Translation and Filtering

I'm facing a challenge with my search feature in a basic table -

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

Currently, the search functionality only works with the original job title value and not with any translations. Is there a way to include translated job titles in the search results?

javascript angularjs filter

Answer 1

Answer №1

If you need to manage the translation in a more organized way, you can implement a custom filter for it

The Custom 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;
  };
});

To apply this filter, simply use it as follows:

Usage within HTML:

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

Answer 2

If you need to manage the translation in a more organized way, you can implement a custom filter for it

The Custom 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;
  };
});

To apply this filter, simply use it as follows:

Usage within HTML:

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

Enhancing Tables with Angular for Dynamic Translation and Filtering

Answer №1

Similar questions

bridging information from tables with text fields in forms

Even after deleting the circle from the Google Map, the label still persists within the Google Map Javascript API

Transferring Data from Python Script to Browser (with an xserver running on a Linux system)

Having trouble retrieving a value within the jQuery.ajax success function

Creating an event on the containing element

Learn the steps to showcase the output in a paragraph using ReactJS

Executing Controller Actions within a JavaScript Timer

Implementing dynamic data binding in JavaScript templates

JavaScript's toFixed method for decimals

Jquery Plugin for Click Selection Activation

Encountering difficulties with the installation of Angular and Node on Ubuntu 16 operating system

Error in AngularJS and TypeScript: Property 'module' is undefined and cannot be read

Successive promises linked together with varying parameters

Tips for configuring CakePHP to trigger the second submit button when the enter key is pressed

Angular single page application with a sleek, user-friendly navigation bar for easy browsing

Guide to managing AutoComplete {onChange} in MUI version 5 with a personalized hook

Display images in a list with a gradual fade effect as they load in Vue.js

Unable to change the filename when utilizing Angular.js ng-file-upload

Customizing the CSS of the TinyMCE editor within a React application

Resolve feature for UI routes fails to function upon refreshing the page