CODEWITHSUNDEEP
javascripthtmlangularjsselectize.js
Ziko
Ziko

Reputation: 971

Placeholder translation for the selectize.js

I'm trying to add a translation to the placeholder in a selectize.js.

However, it seems that it has a different behavior when it comes to translation.

For example

<selectize config='selectizeConfig' placeholder='keyword' ng-click="clear()"
options="myOptions" ng-model="selected"></selectize>

When I try doing that, 

placeholder="{{'keyword'| translate }}"

it does not work ! While it works well with uib-tooltip and other things like.

<input type="text" placeholder="{{'keyword'| translate}}"/>

Any idea ?

Upvotes: 1

Views: 915

Answers (1)

Shantanu
Shantanu

Reputation: 3513

So, when you're using angular-selectize you've option to set placeholder in config object. Prefer that instead of having placeholder attribute on the DOM. So your config object might look like:

$scope.myConfig = {
    create: true,
    onChange: function(value){
      console.log('onChange', value)
    },
    placeholder : $scope.placeholder
}

Where $scope.placeholder is defined in controller as follows:

$scope.placeholder = $filter('translate')('PLACEHOLDER');

Here 'PLACEHOLDER' is a translation id. So this way you'll have selectize placeholder changing according to translations using ngTranslate.

It depends on ho translations are implemented in your app, e.g. if your app doesn't reload on changing language then you'll have to handle more things like, on change on language you'll need to again define the config object of that selectize & you'll need to delete the element & recreate it in DOM using ng-if so there'll be little flicker on that selectize element but it'll execute fine. If your app is going to reload on language change then this logic implementation not required.

Working Plunker Example

Upvotes: 1

Related Questions