Ionic : How to make Angular Translate js working with Search Filter when language changed?

Question

Solved the issue. Solution is edited in this question. Thank you "praszyk".

I'm not able to make Angular Translate working with Search Filter . When the language is English the list items are searchable in english asusual. But when the language is in Bangla the items are still searchable in English but not in Bangla. Is there any solution?

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: "francis@livingston.es",
  bool: false,
  avatar: "img/ionic.png"
  },
  {
  index: 2,
  index_start_at: 57,
  name: "Bnd_Nilachal",
  surname: "Shayes",
  fullname: "Srace Beatty",
  email: "shuvo@livingston.es",
  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

That's because your | translate filter is applied after the angular filter.

The only possible solution would be to translate the array groups beforehand. You would need to use the $translate service in your controller before applying it to the groups variable:

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: "francis@livingston.es",
      bool: false,
      avatar: "img/ionic.png"
    },
    {
      index: 2,
      index_start_at: 57,
      name: "Bnd_Nilachal",
      surname: "Shayes",
      fullname: "Srace Beatty",
      email: "shuvo@livingston.es",
      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 didn't test the code but that's the way to roll here I imagine. Basically filter:input.filterUser operates on the $scope.groups array which isn't translated yet so you need to translate it before ng-repeat takes place.

EDIT: I made a plunkr here to showcase the code above: http://plnkr.co/edit/sVgUIlFxfs6pDsdR2ydQ