NG-opcje zaludnione przez ajax tylko wyświetlanie pierwszej litery w IE

Question

jestem przeżywa dziwny problem kątowe, pozornie tylko w przeglądarce Internet Explorer 9.

Jeśli zaznaczysz następujące jsfiddle: http://jsfiddle.net/U3pVM/382/

Można zobaczyć że 2 zaznaczenia są wypełnione, ale wyświetlacz w IE wydaje się zepsuty i wybrana jest tylko pierwsza litera "A" z "Apple". Wszystkie opcje są wyświetlane po kliknięciu przycisku wyboru.

.

Kod jest bardzo prosty, zapełniam zmienną, która steruje wyborem w powrocie połączenia.

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

Kod opcji ng dla wyboru jest następujący;

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

Zauważyłem, że usterka nie stanie, jeśli używam jednego elementu select, to tylko wtedy, gdy wyświetlanie wielu wybiera w NG-repeat, że problem występuje.

Answer 1

Zobacz <select> only shows first char of selected option

Mieliśmy ten sam problem i coś takiego, co poniżej, ale nas wokół niego.

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

Oczywiście wszystkie nasze selekcje mają tę samą szerokość. Konieczne może być dopracowanie selektora do własnych potrzeb. Zasadniczo wystarczy zmusić IE do przemalowania wybranych w ten czy inny sposób. Updated fiddle.

Answer 2

Używasz angularjs więc odpowiedź brzmi tak:

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

Zauważ, że nie musisz ustawić szerokość jako 100%. Zamiast tego możesz użyć px.

Answer 3

Po prostu doświadczyłem tego samego problemu w IE 9. Obejście problemu polega na wyświetlaniu tylko zaznaczenia po udostępnieniu danych ajax. Prostym rozwiązaniem w AngularJs jest dodanie do zaznaczenia: 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

Kiedy mój projekt ma bardzo późną zmianę wymagań również wspierać IE9 nie chciałem wrócić i opisywanie wszystkich moich <select> elementów lub kontrolerów radzić sobie z tym problemem, więc napisałem następującą dyrektywę aby automatycznie dodać zachowanie do nich wszystkich:

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

Żadna z tych pracował dla mnie, a nie „nG-show” jak zasugerowano w podobnym stanowisku, ale „nG-if” elementem wokół obejmujące wydawało się wykonać sztuczka.

Answer 6

Mimo że jest to dziwne, ale na szczęście właśnie to chcemy wywołać ponownie.

ng-show="List.length > 0"