ng-Optionen von Ajax nur gefüllt ersten Buchstaben in IE Anzeige

Question

Ich bin ein seltsames Problem in Angular, scheinbar nur in Internet Explorer 9.

Wenn Sie überprüfen Sie die folgende jsfiddle erleben: http://jsfiddle.net/U3pVM/382/

können Sie sehen, dass die 2 Auswahlmöglichkeiten gefüllt sind, aber die Anzeige in IE scheint kaputt zu sein, und nur der erste Buchstabe "A" von "Apple" ist ausgewählt. Alle Optionen werden angezeigt, wenn auf die Auswahl geklickt wird.

.

Der Code ist sehr einfach, ich bevölkere die Variable, die die Auswahl im Erfolgsrückruf steuert.

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

Der ng-options-code für die Auswahl ist wie folgt;

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

ich bemerkt habe, dass die Panne nicht passiert, wenn ich ein einzelnes Element select verwenden, ist es nur, wenn ich mehrere wählt in einer ng-repeat anzuzeigen, dass das Problem passiert.

Answer 1

Siehe <select> only shows first char of selected option

Wir hatten das gleiche Problem und etwas wie das, was uns um es unten bekam ist.

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

Natürlich sind alle unsere Selects die gleiche Breite. Möglicherweise müssen Sie den Selektor entsprechend Ihren Anforderungen verfeinern. Im Grunde müssen Sie nur IE zwingen, die Auswahl auf die eine oder andere Weise neu zu streichen. Updated fiddle.

Answer 2

Sie verwenden AngularJS so die Antwort ist wie folgt:

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

Hinweis, dass Sie zu 100% nicht festlegen Breite. Sie können stattdessen px verwenden.

Answer 3

Ich habe gerade das gleiche Problem in IE 9 erlebt. Die Problemumgehung besteht darin, nur die Auswahl anzuzeigen, nachdem die AJAX-Daten verfügbar sind. Eine einfache Lösung in AngularJs besteht darin, dem Select folgendes hinzuzufügen: ng-show = "ReasonsChoice_ajax.length> length> 0".

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

Answer 4

Wenn mein Projekt auch eine sehr späte Änderung in den Anforderungen bekam IE9 unterstützen will ich nicht zurück gehen und all meine <select> Elemente oder Controller mit Anmerkungen versehen mit diesem Problem fertig zu werden, so schrieb ich die folgende Direktive Verhalten zu allen von ihnen automatisch hinzuzufügen:

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

davon weder für mich gearbeitet, und nicht „ng-Show“, wie er in einem ähnlichen Posten vorgeschlagen, aber „ng-wenn“ um Überbrückungselement scheint das zu tun Trick.

Answer 6

Obwohl es seltsam ist, aber zum Glück ist es das, was Sie das select-Tag erneut auslösen möchten.

ng-show="List.length > 0"