2013-10-15 8 views
9

Sto usando v1.0.8 angolareIE10 con determinati utilizzando NG-opzioni con un valore predefinito impostato nel modello sempre seleziona primo elemento in discesa

ho un prescelto e sto usando NG-opzioni direttiva per popolarlo con una serie di dati dichiarati nel mio controller.

snippet HTML

<body ng-controller="SelectCtrl"> 
    <select 
    ng-model="selected" 
    ng-options="o as o.caption for o in options" /> 
</body> 

codice snippet

angular.module('app', []) 
    .controller('SelectCtrl', ['$scope', function($scope) { 

    $scope.options = [ 
     { key: 1, caption: '1' }, 
     { key: 2, caption: '2' }, 
     { key: 3, caption: '3' }, 
     { key: 4, caption: '4' }, 
     { key: 5, caption: '5' } 
    ]; 

}]); 

In Chrome, se si seleziona diciamo opzione 3 poi, come previsto, si ottiene selezionato.

In IE10, tuttavia, se si seleziona l'opzione 3 viene selezionata l'opzione 1.

(http://plnkr.co/edit/T9bbEW?p=preview)

Ciò avviene solo quando non c'è una selezione di default del controllore. E le selezioni successive fatte dopo che la scelta "vuota" è stata rimossa viene impostata correttamente.

Ho il sospetto che potrebbe essere un duplicato di This issue ma non ne sono del tutto sicuro. Non sto cambiando davvero dinamicamente le opzioni qui, anche se suppongo che forse Angular è perché la scelta "vuota" viene rimossa in entrambi i browser.

Tuttavia, desidero questa funzionalità. Non voglio fornire un valore predefinito per questa selezione perché l'utente deve fare una scelta attiva per me.

Qualcuno sa una soluzione alternativa e/o una soluzione per questo? Preferibilmente uno che non implichi problemi con le opzioni usando JQuery ...

risposta

8

L'elemento vuoto che aggiunge l'angolare ha un comportamento strano. Il modo in cui abbiamo ottenuto intorno ad esso è di aggiungere in modo esplicito la nostra voce in bianco e selezionarlo tramite il controller:

angular.module('app', []).controller('SelectCtrl', ['$scope', function($scope) { 

    $scope.options = [ 
    { key: 0, caption: ' ' }, 
    { key: 1, caption: '1' }, 
    { key: 2, caption: '2' }, 
    { key: 3, caption: '3' }, 
    { key: 4, caption: '4' }, 
    { key: 5, caption: '5' } 
    ]; 

    $scope.selected = $scope.options[0] 

}]); 
+0

Avevo paura di dover fare qualcosa del genere. Buono a sapersi io non sono l'unico a farlo almeno :) – ivarni

2

posso risolvere questo con l'aggiunta opzione di default in seguito selezionare.

<option value="">Pls select</option> 

così il vostro prescelto sarebbe simile a questa:

<body ng-controller="SelectCtrl"> 
<select 
    ng-model="selected" 
    ng-options="o as o.caption for o in options"> 
    <option value="">Pls select</option> 
</select> 

Ho provato questo in IE 11, 10, 9 e sembra funzionare. Per favore fatemi sapere se funziona anche per voi.

Penso che questo sia più pulito rispetto alla soluzione di cui sopra.

+1

Questo funziona in IE9 e IE10 se il valore dell'opzione predefinita NON ha bisogno di interpolazione (ad es. "Seleziona" funziona ", {{'Seleziona'}} " non). La soluzione di Phil Sandler con la preposizione di un'opzione vuota per l'array sembra fare il lavoro in questo caso. –

Problemi correlati