Search text with translation

[Carniatto]

I was trying to make the 'Search' text to be translated using angular-translate but with the Ionic-filter-bar is only possible to change the placeholder text in the app.config() phase (requires access to the provider) but in this stage the '$filter' and '$translate' are not available yet.

Do you have any idea how to address this ?

[triantafillos]

I have exactly the same problem. Can anyone help?

[joelcdoyle]

I would also like to see this. I have a need for two separate filter bars with different placeholder text and styling.

filterBarInstance = $ionicFilterBar.show({
      items: $scope.inventory,
      update: function (filteredItems) {
        $scope.inventory = filteredItems;
      },
      filterProperties: 'term',
      placeholder: "Category",
      theme: 'assertive'
    });

[vcyang]

@Carniatto @triantafillos I have the same problem, the version of my $ionicFilterBar is 1.1.1. I solved it by modifying the source code. Here is what I did.

In file ionic.filter.bar.js, modify the html code of filterBarTemplate in module ionFilterBar, add 'translate' to the placeholder="{{::config.placeholder}}, which looks like: placeholder="{{::config.placeholder | translate}}".

And then, in module $ionicFilterBar, override the scope.config.placeholder below the angular.extend(scope, {...} , opts}, here is my code:

if(opts.placeholder) {
     scope.config.placeholder = opts.placeholder;
 }

And finally, define your own translation in your locale files, add placeholder property with your code in the $ionicFilterBar.show() func , it will work now.

If any more questions, fell free to contact me. Thank you.

[diegortorres10]

Hello everyone!

I also needed some customization to my $ionicFilterBar. First if you need to configure a single placeholder for all views, you can add these lines configuration reference

angular.module('app')
    .config(function($ionicFilterBarConfigProvider){
        $ionicFilterBarConfigProvider.placeholder('Busqueda por personas');
    })

To set different placeholder for different views, you can do the following each initialization of $ionicFilterBar:

$scope.showFilterBar = function () {
        filterBarInstance = $ionicFilterBar.show({
            items: $scope.list,
            update: function (filteredItems, filterText) {
                $scope.list = filteredItems;

                if (filterText) {
                    console.log(filterText);
                }
            },
            config: {
              theme: $ionicFilterBarConfig.theme(),
              transition: $ionicFilterBarConfig.transition(),
              back: $ionicConfig.backButton.icon(),
              clear: $ionicFilterBarConfig.clear(),
              favorite: $ionicFilterBarConfig.favorite(),
              search: $ionicFilterBarConfig.search(),
              backdrop: $ionicFilterBarConfig.backdrop(),
              placeholder: 'Búsqueda por título, descripción o fecha',
              close: $ionicFilterBarConfig.close(),
              done: $ionicFilterBarConfig.done(),
              reorder: $ionicFilterBarConfig.reorder(),
              remove: $ionicFilterBarConfig.remove(),
              add: $ionicFilterBarConfig.add()
            },
            cancelText: 'Cancelar'
        });
    }

Do not forget to include, in addition to $ionicFilterBar, references to $ionicConfig and $ionicFilterBarConfig

[Carniatto]

@vcyang can you make an pull request ? I'd like to use this as you described without having to hack the dependency

[douglasvinter]

@vcyang @diegortorres10 Was one of yours solutions merged?

Thanks