2013-04-02 7 views
17

Ecco uno snippet. Q2 è selezionato come previsto.Come funziona ng-selected?

<select name="quarter" ng-model="Quarter" > 
    <option value="1" >Q1</option> 
    <option value="2" ng-selected="Quarter=='Q1'">Q2</option> 
    <option value="3">Q3</option> 
    <option value="4">4</option> 
</select> 

Modifica 'Q1'-'Q2 'fa niente come selezionato come mi aspetto. Ora mettendo ng-selected="Quarter=='Q1'" NON fa Q1 selezionato fino a quando non cancella ng-selected="Quarter=='Q2"

wtf. Come può funzionare?

+0

questo sembra funzionare per me o non è questo che stai cercando di fare? http://jsfiddle.net/xpjaD/ – Ronnie

+0

@Ronnie: Questo è quello che sto cercando di fare. WTH. Ho cancellato tutto il mio codice controller eccetto quell'assegnazione a Q1 e ... immagino che qualcosa sia molto sbagliato nel codice HTML – BruteCode

+0

@Ronnie: Related: http://stackoverflow.com/questions/15772672/why-does-ng-selected- non-lavoro-con-ng-ripetitore – BruteCode

risposta

16

Se si inserisce l'opzione ng sull'elemento opzione, l'opzione verrà selezionata quando il valore selezionato da ng è true. Nel tuo caso, l'opzione Q2 è selezionata quando Quarter è uguale a Q1.

Se si desidera selezionare il valore passato nel quartiere, è necessario inserire il ng-selezionato sull'elemento di selezione:

<select name="quarter" ng-model="Quarter" ng-selected="Quarter" 
     ng-options="Quarter for Quarter in Quarters" > 
    {{Quarter}} 
</select> 

Date un'occhiata al select directive documentation.

+0

Interessante, ma anche WTF. Non vedo ng-options sul sito web di api docs.angularjs.org/api/ Inoltre non sembra funzionare con ng-repeater http: // stackoverflow.it/questions/15772672/why-does-ng-selected-not-work-with-ng-repeater – BruteCode

+0

ng-options è un attributo della direttiva select: [doc.angularjs] (http://docs.angularjs.org /api/ng.directive:select) –

+0

Il tuo violino è stato contrassegnato come non sicuro perché ha un iframe incorporato come unico contenuto ... !!! abbozzato! – DrCord

3
<select ng-model="hour"> 
    <option ng-selected="hour == $index" ng-repeat="h in (((b=[]).length=24)&&b) track by $index" ng-bind="$index">{{h}}</option> 
</select> 

se si desidera una selezione per 24 ore, è possibile farlo.

2

come questo:

<body ng-controller="MainCtrl"> 
    {{referenceNumber}} 
    <select ng-model="referenceNumber"> 
      <option ng-selected="!referenceNumber">Default</option> 
      <option ng-repeat="number in numbers track by $index" ng-value="number">{{number}}</option> 
     </select> 
    </body> 

"Credo che uno dei motivi principali per ngSelected è quello di impostare di default valori a seconda se il modello non è impostato correttamente." joshkurz ha commentato il 3 marzo 2014

Quindi il modo giusto sarebbe affidarsi a ng-model solo nel tuo caso. Il modo giusto per fare ciò che si sta cercando di fare (pre selezionare un'opzione) è come questo:

<select ng-model="purchase.product" name="purchase.product" class="u-full-width" ng-options="product.id as product.name for product in products"></select> 

Riferimento:

  1. http://plnkr.co/edit/xXq3b40nvqkjPlyCxZNG?p=preview
  2. https://github.com/angular/angular.js/issues/6528
1

Il ng-selected direttiva prende il valore booleano per funzionare. Hai solo bisogno di passare il suo valore true per farlo funzionare. Non ha nulla a che fare con il tag ng-model del tag <select>. Di seguito è riportato un esempio che descrive lo stesso.

<select name="quarter" ng-model="Quarter" > 
    <option value="1" >Q1</option> 
    <option value="2" ng-selected="true">Q2</option> 
    <option value="3">Q3</option> 
    <option value="4">Q4</option> 
</select> 

Ciò renderà l'opzione Q2 selezionata per impostazione predefinita.