updates hidden input placeholder binding don't update select2 placeholder

[lanterndev]

Given something like

<input type="hidden" placeholder="{{ PLACEHOLDER | translate }}" ui-select2="select2opts" ...>

the select2's placeholder is initially rendered correctly, but if the value of {{ PLACEHOLDER | translate }} changes after the select2 has been initialized (e.g. because the user has changed her language setting), the select2's placeholder is not updated to match the hidden input's.

[msalahz]

Did found a solution for this issue ?

[nehaleem]

Bump, i have same issue here. I am using angular-translate (with messageformat) and this placeholder is not changing with translate filter.

[bluesky777]

I have the same problem, i would like to translate the select2 with angular-translate.

[BerndWessels]

+10 Same problem here - renders Select2 unusable for our angular application.

[stherrienaspnet]

I found a solution, i just made some minor modification add scope: { ready: "=" },

            //Fix to ensure translations or data are ready
            if (scope.ready == undefined) {
                initialize();
            } else {
                scope.$watch('ready', function(newVal) {
                    if (scope.ready) {
                        initialize();
                    }
                });
            }

            function initialize() {
                // Initialize the plugin late so that the injected DOM does not disrupt the template compiler
                $timeout(function () {
                    elm.select2(opts);

                    // Set initial value - I'm not sure about this but it seems to need to be there
                    elm.select2('data', controller.$modelValue);
                    // important!
                    controller.$render();

                    // Not sure if I should just check for !isSelect OR if I should check for 'tags' key
                    if (!opts.initSelection && !isSelect) {
                        var isPristine = controller.$pristine;
                        controller.$setViewValue(
                          convertToAngularModel(elm.select2('data'))
                        );
                        if (isPristine) {
                            controller.$setPristine();
                        }
                        elm.prev().toggleClass('ng-pristine', controller.$pristine);
                    }
                });
            }

[blazejgrzelinski]

I fixed by adding this code in the angular-ui-select2.js

  return function (scope, elm, attrs, controller) {

  attrs.$observe('placeholder', function(newValue) {
      if(typeof elm.select2("val") == 'string' && elm.select2("val")=="")
        $(elm.select2("container")).find(".select2-chosen").html(newValue);

      if(Array.isArray(elm.select2("val")) && elm.select2("val").length==0)
        $(elm.select2("container")).find(".select2-default").val(newValue);

  });

Blazej

[stherrienaspnet]

Thank you!

On Tue, Dec 2, 2014 at 7:52 AM, Blazej [email protected] wrote:

I fixed by adding this code in the angular-ui-select2.js

return function (scope, elm, attrs, controller) {

attrs.$observe('placeholder', function(newValue) { if(typeof elm.select2("val") == 'string' && elm.select2("val")=="") $(elm.select2("container")).find(".select2-chosen").html(newValue);

  if(Array.isArray(elm.select2("val")) && elm.select2("val").length==0)
    $(elm.select2("container")).find(".select2-default").val(newValue);

});

Blazej

— Reply to this email directly or view it on GitHub https://github.com/angular-ui/ui-select2/issues/59#issuecomment-65226264 .