Working with Ionic: Implementing Angular Translate js with Search Filter and Managing Language Changes

Issue resolved. A big thank you to "praszyk" for the solution.

I am facing an issue with Angular Translate while using Search Filter. When the language is set to English, the list items are searchable in English as expected. However, when the language is set to Bangla, the items are still only searchable in English and not in Bangla. Is there a workaround for this?

View

<ion-list>
            <ion-item>
              <label class="item item-input">
                <i class="icon ion-search placeholder-icon"></i>
                <input type="text" ng-model="input.filterUser" placeholder="Search">
              </label>
            </ion-item>
              <ion-item class="item-avatar" ng-repeat="user in groups | filter:input.filterUser">
                <img src="{{user.avatar}}">           
                <h2>{{user.name | translate}}</h2>
                <p>{{user.fullname}}
                  {{user.email}}</p>       
              </ion-item>        
          </ion-list>

Controller

.controller('CreditCtrl', function($scope, $ionicConfig, $translate) {

  $scope.input = {};  
  $scope.groups = [
  {
  index: 1,
  index_start_at: 56,
  name:  "Bnd_Nilgiri",
  surname: "Hayes",
  fullname: "Grace Beatty",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5731253639343e24173b3e213e393024233839793224">[email protected]</a>",
  bool: false,
  avatar: "img/ionic.png"
  },
  {
  index: 2,
  index_start_at: 57,
  name: "Bnd_Nilachal",
  surname: "Shayes",
  fullname: "Srace Beatty",
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84f7ecf1f2ebc4e8edf2edeae3f7f0ebeaaae1f7">[email protected]</a>",
  bool: false,
  avatar: "img/ionic.png"
  }
];



 angular.forEach($scope.groups, function(user, index){
      $translate(user.name, {user: user}).then(function(translated){
        $scope.groups[index].name = translated;
      });
    });

})

Translation Provider

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $translateProvider) {

 $translateProvider.translations('en', {
    Bnd_Nilgiri : 'Nilgiri Tourspot',
    Bnd_Nilachal : 'Nilachal Tourspot',
    Bnd_Bogalake : 'Bogalake Tourspot',    
  });
  $translateProvider.translations('de', {
    // Bandarban Tour Spots

    Bnd_Nilgiri : 'নিলগিরি ট্যুর স্পট',
    Bnd_Nilachal : 'নিলাচল ট্যুর স্পট',
    Bnd_Bogalake : 'বগালেক ট্যুর স্পট',
  });
  $translateProvider.preferredLanguage('en');

Answer №1

One reason for this issue is that the | translate filter is being applied after the angular filter.

To resolve this, you should translate the array groups before using it in your controller. You can achieve this by utilizing the $translate service in your controller like so:

var en_translations =  {
    Bnd_Nilgiri : 'Nilgiri Tourspot',
    Bnd_Nilachal : 'Nilachal Tourspot',
    Bnd_Bogalake : 'Bogalake Tourspot',    
}

var de_translations = {
    Bnd_Nilgiri : 'নিলগিরি ট্যুর স্পট',
    Bnd_Nilachal : 'নিলাচল ট্যুর স্পট',
    Bnd_Bogalake : 'বগালেক ট্যুর স্পট',
};


var app = angular.module('myApp', ['pascalprecht.translate']);

app.config(['$translateProvider', function ($translateProvider) {
  // add translation table
  $translateProvider
    .translations('en', en_translations)
    .translations('de', de_translations)
    .preferredLanguage('de');
}]);

app.controller('Ctrl', ['$scope', '$translate', function ($scope, $translate) {
  // expose translation via `$translate` service
  $scope.groups =  [
    {
      index: 1,
      index_start_at: 56,
      name:  "Bnd_Nilgiri",
      surname: "Hayes",
      fullname: "Grace Beatty",
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="620410030c010b11220e0b140b0c0511160d0c4c0711">[email protected]</a>",
      bool: false,
      avatar: "img/ionic.png"
    },
    {
      index: 2,
      index_start_at: 57,
      name: "Bnd_Nilachal",
      surname: "Shayes",
      fullname: "Srace Beatty",
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="01726974776e416d6877686f6672756e6f2f6472">[email protected]</a>",
      bool: false,
      avatar: "img/ionic.png"
    }
  ];
  angular.forEach($scope.groups, function(user, index){
    $translate(user.name, {user: user}).then(function(translated){
      $scope.groups[index].name = translated;
    });
  });

}]);

I haven't tested the code but I believe this approach should work. The filter:input.filterUser operates on the $scope.groups array which needs to be translated before ng-repeat.

UPDATE: I created a plunkr to demonstrate the code above: http://plnkr.co/edit/sVgUIlFxfs6pDsdR2ydQ

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can jQuery identify a specific combination of letters and single-digit numbers?

I am working with the following HTML elements <button id="btn7">7</button> <button id="btn8">8</button> <button id="btn9">9</button><button id="btnMulti">*</button> ...

Karma mysteriously bypassing certain tests without any indication of errors or exclusion using xdescribe or x

All my tests seem to be completely ignored, even though I have checked all over the project for any instances of `fdescribe`, `fit`, `xdescribe`, `xit`, `ddescribe`, or `iit`, and there are none remaining. There are only a few uses of `xit`, but not many. ...

Learn the process of downloading a pdf file with vuejs and bootstrap-vue

Having trouble uploading a PDF file to my browser and then downloading it afterwards. The upload is fine, but the download isn't working. This is how I am uploading: <b-form-file v-model="form.file" :state="Boolean(form.file)" placeholder="Choose ...

Allowing SVGs to be clickable without disrupting the functionality of YouTube videos

I'm experiencing an issue with the overlapping of the svg and YouTube elements. If you hover your mouse over, just to the right of the svg and click, instead of opening the video, it redirects you back to the previous page. Clicking on the area betw ...

Utilizing Rails to gather and display JSON data in a Highcharts visualization

Trying to display custom labels on Highcharts column chart x-axis. The chart currently renders data, but default labels like 0,1,2,3... are displayed on the x-axis. notes_controller: def dashboard @data = Note.getData() end note.rb def self.getData ...

Illuminate the nodes as I sketch the link in GOJS

I've been attempting to outline all potential nodes when creating a new connection, but haven't had much luck. My goal is to accomplish something along these lines: https://i.sstatic.net/R6jbV.png I experimented with event listeners, bu ...

Using VueJS for interactive checkbox filtering

This marks the beginning of my VueJS project, as I transition from jQuery. My main goal is to filter a grid using multiple checkboxes. In the JavaScript code provided, there is a filterJobs function that filters an array based on the values checked (v-mode ...

What is the process for resetting a JQueryUI effect animation?

I'm facing an issue with two timer bars that each wind down over a 5-second period. When I try to stop and reset the first timer, it simply continues from where it left off instead of resetting. The desired behavior is as follows: Timer1 starts User ...

Repeatedly encountering identical values in delayed for loop

I can't figure out why my delayed for loop is consistently giving me a "-1" as the result. for (var i = 5; i > 0; i--) { setTimeout(function() { console.log(i) }, i * 1000) } (I adjusted my variable to be 5) ...

Guide on programmatically integrating images into the user interface in ASP.NET from the code behind, while ensuring that all styles have been pre-defined in the .as

I have created a static aspx page with the following code: <div class="container"> <div class="contain" id="subdiv" runat="server"> <input type="checkbox" id="cb1" runat="server" /> <label for="cb1"> <img sr ...

Testing React components with Jasmine

I need some guidance on how to properly integrate the Jasmine test runner into my React app without using Karma. Currently, I am deploying my test cases to a TV and running the standalone spec runner on the set. To do this, I had to inline and transpile th ...

In my quest to create a basic tic tac toe game using HTML and JavaScript

Struggling to create a straightforward tic tac toe game using html and javascript. Essentially, when a button is clicked, it should change its value to "x". However, despite my efforts, nothing seems to happen upon clicking. <!doctype html> <ht ...

What is the best way to find all documents based on a particular field in MongoDB?

Within my MongoDB database, I have a collection of bets structured like this: { id: String, user_id: String, type: String, events: [{ eventID: String, sport: String, evento: String, ...

KnockoutJS - Using containerless control flow binding with predefined values

Inside a select control, I am using ko:foreach instead of the usual bindings. Everything is working perfectly, except that the initial value for "specialProperty" is set to unknown even when the select control is set to Option 1. It behaves as expected o ...

Hover over to disable inline styling and restore default appearance

There are some unique elements (.worker) with inline styles that are dynamically generated through Perl. I want to change the background when hovering over them and then revert back to the original Perl-generated style. The only way to override the inline ...

Guide on exporting a dynamically imported class instance using ES6 modules in NodeJS

Currently, I am engrossed in a book on NodeJS that illustrates a simple web application example. In this example, the prerequisite is to have various data store classes housed in their respective modules and dynamically selecting the data store by configur ...

In JavaScript, the code fails to verify the email entered through a form

Hi, I'm not sure if this is the right place to ask my question but I'm having trouble with a code that I can't seem to figure out. I've tried various algorithms but none of them seem to work. My issue involves validating an email from a ...

Discover the nearest class and smoothly expand it with the slideDown function in jQuery

Hey there, I'm working on implementing a "View More" button on my page. The button will reveal another unordered list that currently has the class of "hidden-list". When the user clicks on "View More", I want it to slideToggle the hidden-list element ...

Using ES6, when utilizing array map in ReactJS, the function does not produce a return value

One challenge I'm facing involves mapping an array to find a specific string value. Unfortunately, despite my efforts, the map function is not returning anything as expected. class Application extends React.Component { constructor(){ super(); ...

Customizing line charts with D3.js and AngularJS for ultimate visual impact

Working on a project involving the creation of a line chart using D3.js library and AngularJS within an Ionic framework. I am looking to customize the color of data points based on the Y-axis values. For example, if the value falls between 0-30, I want t ...