NG-opzioni popolate da ajax solo la visualizzazione prima lettera in IE

Question

sto sperimentando un problema strano angolare, apparentemente solo in Internet Explorer 9.

Se si seleziona il seguente jsfiddle: http://jsfiddle.net/U3pVM/382/

Si può vedere che i 2 selezionati sono popolati, ma il display in IE sembra rotto e solo la prima lettera, 'A' di 'Apple' è selezionata. Tutte le opzioni vengono visualizzate quando si fa clic sulla selezione.

.

Il codice è molto semplice, compongo la variabile che guida la selezione nel callback di successo.

.success(function (data) { 
    $scope.ReasonsChoice_ajax = data; 
}); 

Il codice di opzione ng per la selezione è il seguente;

<select ng-model="Reason" ng-options="Reason for Reason in ReasonsChoice_ajax"></select> 

ho notato che il glitch non succede se utilizzo un unico elemento di selezione, è solo quando visualizzare più seleziona in un ng-repeat che il problema si verifica.

Answer 1

Vedi <select> only shows first char of selected option

Abbiamo avuto lo stesso problema e qualcosa di simile a ciò che ci sta sotto ottenuto intorno ad esso.

$("select").css("width", $("select").css("width")); 

Naturalmente, tutti i nostri contatti hanno la stessa larghezza. Potrebbe essere necessario perfezionare il selettore in base alle proprie esigenze. Fondamentalmente è sufficiente forzare IE a ridisegnare i selettori in un modo o nell'altro. Updated fiddle.

Answer 2

Si utilizza Angularjs quindi la risposta è in questo modo:

<select ng-style="{'width': '100%'}"></select> 

Si noti che non c'è bisogno di impostare la larghezza al 100%. Puoi invece usare px.

Answer 3

Ho appena sperimentato questo stesso problema in IE 9. La soluzione consiste nel mostrare solo il prescelto dopo che i dati ajax è disponibile. Una soluzione semplice in AngularJs è aggiungere follow alla selezione: ng-show = "ReasonsChoice_ajax.length> 0".

<select ng-model="Reason" ng-show="ReasonsChoice_ajax.length > 0" ng-options="Reason for Reason in ReasonsChoice_ajax"></select> 

Answer 4

Quando il mio progetto ha ottenuto un cambiamento molto tardi nei requisiti per supportare anche IE9 non volevo tornare indietro e annotare tutti i miei <select> elementi o controller per affrontare questo problema, così ho scritto la seguente direttiva aggiungere un comportamento a tutti loro automaticamente:

angular.module('xxxxx') 
.directive('select', 
      ['$log', '$parse', '$timeout', function ($log, $parse, $timeout) { 
    var NG_OPTIONS_REGEXP = /^\s*([\s\S]+?)(?:\s+as\s+([\s\S]+?))?(?:\s+group\s+by\s+([\s\S]+?))?\s+for\s+(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?$/; 
    return { 
     restrict: 'E', 
     scope: true, 
     require: ['select', '?ngModel'], 
     link: function (scope, elem, attrs, control) { 
      var isIE = document.attachEvent, 
       match; 

      if (isIE 
       && attrs.ngOptions 
       && (match = attrs.ngOptions.match(NG_OPTIONS_REGEXP))) { 
       var values = $parse(match[7]); 
       scope.$watchCollection(values, function() { 
        // Redraw this select element 
        $timeout(function() { 
         var originalWidth = $(elem).css('width'); 
         $(elem).css('width', '0'); 
         $(elem).css('width', originalWidth); 
        }, 10); 
       }); 
      } 
     } 
    }; 
}]); 

Answer 5

Nessuna di queste ha funzionato per me, e non "ng-show", come suggerito in un post simile, ma "ng-if" elemento attorno si estende sembrava fare il trucco.

Answer 6

Anche se è strano ma fortunatamente questo è ciò che si desidera attivare nuovamente il tag select.

ng-show="List.length > 0"