Ecco cosa sembra infastidire molte persone (incluso me).

Quando si utilizza la ng-optionsdirettiva in AngularJS per compilare le opzioni per un <select>tag, non riesco a capire come impostare il valore per un'opzione. La documentazione per questo è davvero poco chiara - almeno per un semplice come me.

Posso impostare facilmente il testo di un'opzione in questo modo:

ng-options="select p.text for p in resultOptions"

Quando resultOptionsè ad esempio:

[
    {
        "value": 1,
        "text": "1st"
    },
    {
        "value": 2,
        "text": "2nd"
    }
]

Dovrebbe essere (e probabilmente è) la cosa più semplice per impostare i valori delle opzioni, ma finora non capisco.

Vedi ngOptions

ngOptions (opzionale) - { comprehension_expression=} - in una delle seguenti forme:

Per origini dati array : label for value in array select as label for value in array label group by group for value in array select as label group by group for value in array track by trackexpr Per origini dati oggetto: label for (key , value) in object select as label for (key , value) in object label group by group for (key, value) in object select as label group by group for (key, value) in object

Nel tuo caso, dovrebbe essere

array = [{ "value": 1, "text": "1st" }, { "value": 2, "text": "2nd" }];

<select ng-options="obj.value as obj.text for obj in array"></select>

Aggiornare

Con gli aggiornamenti su AngularJS, è ora possibile impostare il valore effettivo per l' valueattributo di selectelemento con track byespressione.

<select ng-options="obj.text for obj in array track by obj.value">
</select>

Come ricordare questa roba brutta

A tutte le persone che hanno difficoltà a ricordare questo modulo di sintassi: sono d'accordo che questa non è la sintassi più semplice o bella. Questa sintassi è una specie di versione estesa della comprensione e della comprensione dell'elenco di Python che mi aiuta a ricordare molto facilmente la sintassi. È qualcosa del genere:

Codice Python:

my_list = [x**2 for x in [1, 2, 3, 4, 5]]
> [1, 4, 9, 16, 25]

# Let people to be a list of person instances
my_list2 = [person.name for person in people]
> my_list2 = ['Alice', 'Bob']

Questa è in realtà la stessa sintassi della prima elencata sopra. Tuttavia, di <select>solito è necessario distinguere tra il valore effettivo nel codice e il testo mostrato (l'etichetta) in un <select>elemento.

Ad esempio, abbiamo bisogno person.iddel codice, ma non vogliamo mostrarlo idall'utente; vogliamo mostrare il suo nome. Allo stesso modo, non ci interessa person.nameil codice. Arriva la asparola chiave per etichettare le cose. Quindi diventa così:

person.id as person.name for person in people

Oppure, invece di person.idpotremmo aver bisogno persondell'istanza / riferimento stesso. Vedi sotto:

person as person.name for person in people

Per gli oggetti JavaScript, si applica anche lo stesso metodo. Ricorda solo che gli oggetti nell'oggetto sono decostruiti con (key, value)coppie.

Come gli attributi del valore ottengono il suo valore:

• Quando si utilizza un array come origine dati, sarà l'indice dell'elemento array in ogni iterazione;
• Quando si utilizza un oggetto come origine dati, sarà il nome della proprietà in ogni iterazione.

Quindi nel tuo caso dovrebbe essere:

obj = { '1': '1st', '2': '2nd' };

<select ng-options="k as v for (k,v) in obj"></select>

Ho avuto anche questo problema. Non sono riuscito a impostare il mio valore in ng-options. Ogni opzione che è stata generata è stata impostata con 0, 1, ..., n.

Per farlo bene, ho fatto qualcosa del genere nelle mie opzioni ng:

HTML:

<select ng-options="room.name for room in Rooms track by room.price">
    <option value="">--Rooms--</option>
</select>

Uso "track by" per impostare tutti i miei valori con room.price.

(Questo esempio fa schifo: perché se ci fosse più di un prezzo uguale, il codice fallirebbe. Quindi ASSICURARSI di avere valori diversi.)

JSON:

$scope.Rooms = [
            { name: 'SALA01', price: 100 },
            { name: 'SALA02', price: 200 },
            { name: 'SALA03', price: 300 }
        ];

L'ho imparato dal post sul blog Come impostare il valore selezionato iniziale di un elemento select usando Angular.JS ng-options e tracciarlo .

Guarda il video. È una bella lezione :)

Se desideri modificare il valore dei tuoi optionelementi perché il modulo verrà infine inviato al server, invece di farlo,

<select name="text" ng-model="text" ng-options="select p.text for p in resultOptions"></select>

Puoi farlo:

<select ng-model="text" ng-options="select p.text for p in resultOptions"></select>
<input type="hidden" name="text" value="{{ text }}" />

Il valore previsto verrà quindi inviato tramite il modulo con il nome corretto.

Per inviare un valore personalizzato chiamato my_heroal server utilizzando un normale modulo invia:

JSON:

"heroes": [
  {"id":"iron", "label":"Iron Man Rocks!"},
  {"id":"super", "label":"Superman Rocks!"}
]

HTML:

<select ng-model="hero" ng-options="obj.id as obj.label for obj in heroes"></select>
<input type="hidden" name="my_hero" value="{{hero}}" />

Il server riceverà irono supercome valore di my_hero.

Questo è simile alla risposta di @neemzy , ma specifica dati separati per l' valueattributo.

Sembra ng-optionscomplicato (forse frustrante) da usare, ma in realtà abbiamo un problema di architettura.

AngularJS funge da framework MVC per un'applicazione dinamica HTML + JavaScript. Mentre il suo componente (V) iew offre HTML "templating", il suo scopo principale è quello di collegare le azioni dell'utente, tramite un controller, alle modifiche del modello. Pertanto, il livello appropriato di astrazione, dal quale lavorare in AngularJS, è che un elemento select imposta un valore nel modello su un valore da una query .

• Come una fila query viene presentato all'utente è la (V) preoccupazione di IEW e ng-optionsfornisce la forparola chiave per dettare ciò che il contenuto dell'elemento opzione dovrebbe essere ad esempio p.text for p in resultOptions .
• Il modo in cui una riga selezionata viene presentata al server è la preoccupazione di (M) odel. Pertanto ng-optionsfornisce la asparola chiave per specificare quale valore viene fornito al modello come in k as v for (k,v) in objects.

La soluzione corretta a questo problema è quindi di natura architettonica e comporta il refactoring del codice HTML in modo che l'odore (M) esegua la comunicazione del server quando richiesto (anziché l'utente che invia un modulo).

Se una pagina HTML MVC non è necessaria un'ingegnerizzazione eccessiva per il problema attuale: utilizzare solo la parte di generazione HTML del componente iew di AngularJS (V). In questo caso, segui lo stesso schema utilizzato per generare elementi come <li />'sotto <ul />' e posiziona una ripetizione ng su un elemento opzione:

<select name=“value”>
    <option ng-repeat=“value in Model.Values” value=“{{value.value}}”>
        {{value.text}}
    </option>
</select>

Come kludge , si può sempre spostare l'attributo name dell'elemento select su un elemento input nascosto:

<select ng-model=“selectedValue” ng-options=“value.text for value in Model.Values”>
</select>
<input type=“hidden” name=“value” value=“{{selectedValue}}” />

Puoi farlo:

<select ng-model="model">
    <option value="">Select</option>
    <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
</select>

-- AGGIORNARE

Dopo alcuni aggiornamenti, utenti frm.adiputra 's soluzione è molto meglio. Codice:

obj = { '1': '1st', '2': '2nd' };
<select ng-options="k as v for (k,v) in obj"></select>

Ho lottato con questo problema per un po 'oggi. Ho letto la documentazione di AngularJS, questo e altri post e alcuni dei blog a cui conducono. Tutti mi hanno aiutato a raccogliere i dettagli più fini, ma alla fine questo sembra essere un argomento confuso. Principalmente a causa delle molte sfumature sintattiche di ng-options.

Alla fine, per me, è sceso a meno è di più.

Dato un ambito configurato come segue:

        //Data used to populate the dropdown list
        $scope.list = [
           {"FirmnessID":1,"Description":"Soft","Value":1},         
           {"FirmnessID":2,"Description":"Medium-Soft","Value":2},
           {"FirmnessID":3,"Description":"Medium","Value":3}, 
           {"FirmnessID":4,"Description":"Firm","Value":4},     
           {"FirmnessID":5,"Description":"Very Firm","Value":5}];

        //A record or row of data that is to be save to our data store.
        //FirmnessID is a foreign key to the list specified above.
        $scope.rec = {
           "id": 1,
           "FirmnessID": 2
        };

Questo è tutto ciò di cui avevo bisogno per ottenere il risultato desiderato:

        <select ng-model="rec.FirmnessID"
                ng-options="g.FirmnessID as g.Description for g in list">
            <option></option>
        </select>   

Si noti che non ho usato track by. L'uso track bydell'elemento selezionato restituirebbe sempre l'oggetto che corrispondeva al FirmnessID, anziché al FirmnessID stesso. Questo ora soddisfa i miei criteri, vale a dire che dovrebbe restituire un valore numerico anziché l'oggetto, e da utilizzare ng-optionsper ottenere il miglioramento delle prestazioni fornito non creando un nuovo ambito per ciascuna opzione generata.

Inoltre, mi serviva la prima riga vuota, così ho semplicemente aggiunto un <option>alla <select>elemento.

Ecco un Plunkr che mostra il mio lavoro.

Invece di usare la nuova funzionalità 'track by' puoi semplicemente farlo con un array se vuoi che i valori siano gli stessi del testo:

<select ng-options="v as v for (k,v) in Array/Obj"></select>

Notare la differenza tra la sintassi standard, che renderà i valori le chiavi dell'oggetto / array e quindi 0,1,2 ecc. Per un array:

<select ng-options"k as v for (k,v) in Array/Obj"></select>

k come v diventa v come v .

L'ho scoperto basandomi sul buon senso guardando la sintassi. (k, v) è l'istruzione effettiva che divide l'array / oggetto in coppie valore-chiave.

Nell'istruzione 'k as v', k sarà il valore e v sarà l'opzione di testo visualizzata per l'utente. Penso che 'track by' sia disordinato e eccessivo.

Questo è stato il più adatto a tutti gli scenari secondo me:

<select ng-model="mySelection.value">
   <option ng-repeat="r in myList" value="{{r.Id}}" ng-selected="mySelection.value == r.Id">{{r.Name}}
   </option>
</select>

dove è possibile utilizzare il modello per associare i dati. Otterrai il valore in quanto l'oggetto conterrà e la selezione predefinita in base al tuo scenario.

Questo è come l'ho risolto. Ho monitorato la selezione per valore e ho impostato la proprietà dell'elemento selezionato sul modello nel mio codice JavaScript.

Countries =
[
    {
        CountryId = 1, Code = 'USA', CountryName = 'United States of America'
    },
    {
       CountryId = 2, Code = 'CAN', CountryName = 'Canada'
    }
]

<select ng-model="vm.Enterprise.AdminCountry" ng-options="country.CountryName for country in vm.Countries track by country.CountryId">

vmè il mio controller e il Paese nel controller recuperato dal servizio è {CountryId =1, Code = 'USA', CountryName='United States of America'}.

Quando ho selezionato un altro paese dal menu a discesa Seleziona e pubblicato la mia pagina con "Salva", ho ottenuto il limite di paese corretto.

La ng-optionsdirettiva non imposta l'attributo value sugli <options>elementi per le matrici:

Utilizzando limit.value as limit.text for limit in limitssignifica:

imposta l <option>'etichetta come limit.text
salva il limit.valuevalore nella selezioneng-model

Vedi la domanda Stack Overflow AngularJS ng-options che non visualizza i valori .

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select><br>

È possibile utilizzare ng-options per ottenere l'associazione tag selezionata per valutare e visualizzare i membri

Durante l'utilizzo di questa fonte di dati

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

puoi utilizzare quanto segue per associare il tag di selezione a valore e nome

<select name="text" ng-model="name" ng-options="c.key as c.name for c in countries"></select>

funziona benissimo

La risposta corretta a questa domanda è stata fornita dall'utente frm.adiputra , poiché attualmente questo sembra essere l'unico modo per controllare esplicitamente l'attributo value degli elementi opzione.

Tuttavia, volevo solo sottolineare che "selezionare" non è una parola chiave in questo contesto, ma è solo un segnaposto per un'espressione. Si prega di fare riferimento al seguente elenco, per la definizione dell'espressione "select" e per altre espressioni che possono essere utilizzate nella direttiva ng-options.

L'uso di select come è rappresentato nella domanda:

ng-options='select p.text for p  in resultOptions'

è essenzialmente sbagliato.

Sulla base dell'elenco di espressioni, sembra che trackexpr possa essere utilizzato per specificare il valore, quando le opzioni sono fornite in una matrice di oggetti, ma è stata utilizzata solo con il raggruppamento.

Dalla documentazione di AngularJS per ng-options:

• array / object : un'espressione che valuta un array / oggetto su cui scorrere.
• valore : variabile locale che farà riferimento a ciascun elemento dell'array o a ciascun valore di proprietà dell'oggetto durante l'iterazione.
• chiave : variabile locale che farà riferimento al nome di una proprietà nell'oggetto durante l'iterazione.
• etichetta : il risultato di questa espressione sarà l'etichetta per l'elemento. Molto probabilmente l'espressione farà riferimento alla variabile value (es. Value.propertyName).
• seleziona : il risultato di questa espressione sarà associato al modello dell'elemento genitore. Se non specificato, selezionare espressione verrà impostato sul valore predefinito.
• gruppo : il risultato di questa espressione verrà utilizzato per raggruppare le opzioni utilizzando l'elemento DOM.
• trackexpr : usato quando si lavora con una matrice di oggetti. Il risultato di questa espressione verrà utilizzato per identificare gli oggetti nella matrice. Molto probabilmente trackexpr farà riferimento alla variabile value (ad es. Value.propertyName).

Selezionare un elemento in ng-options può essere un po 'complicato a seconda di come si imposta l'origine dati.

Dopo aver lottato con loro per un po 'ho finito per fare un campione con le fonti di dati più comuni che uso. Potete trovare qui:

http://plnkr.co/edit/fGq2PM?p=preview

Ora per far funzionare ng-options, ecco alcune cose da considerare:

1. Normalmente si ottengono le opzioni da una fonte e il valore selezionato da un'altra. Per esempio:
   • stati :: dati per ng-opzioni
   • user.state :: Opzione da impostare come selezionato
2. Sulla base di 1, la cosa più semplice / logica da fare è riempire la selezione con una fonte e quindi impostare il valore tramite il codice selezionato. Raramente sarebbe meglio ottenere un set di dati misto.
3. AngularJS consente ai controlli di selezione di contenere più di key | label. Molti esempi online mettono gli oggetti come 'chiave', e se hai bisogno di informazioni dall'oggetto impostalo in quel modo, altrimenti usa la proprietà specifica di cui hai bisogno come chiave. (ID, CODICE, ecc. Come nel campione plckr)

4. Il modo per impostare il valore del controllo a discesa / seleziona dipende da # 3,

   • Se la chiave a discesa è una singola proprietà (come in tutti gli esempi in plunkr), è sufficiente impostarla, ad esempio: $scope.dropdownmodel = $scope.user.state;

   • Se si imposta l'oggetto come chiave, è necessario scorrere ciclicamente le opzioni, anche l'assegnazione dell'oggetto non imposterà l'elemento come selezionato in quanto avrà diversi hashkey, ad esempio:

     for (var i = 0, len = $scope.options.length; i < len; i++) {
       if ($scope.options[i].id == savedValue) { // Your own property here:
         console.log('Found target! ');
         $scope.value = $scope.options[i];
         break;
       }
     }

È possibile sostituire savedValue per la stessa proprietà in un altro oggetto, $scope.myObject.myProperty.

Per me la risposta di Bruno Gomes è la risposta migliore.

Ma in realtà, non devi preoccuparti di impostare la proprietà value delle opzioni selezionate. AngularJS se ne occuperà. Lasciami spiegare in dettaglio.

Per favore, considera questo violino

angular.module('mySettings', []).controller('appSettingsCtrl', function ($scope) {

    $scope.timeFormatTemplates = [{
        label: "Seconds",
        value: 'ss'
    }, {
        label: "Minutes",
        value: 'mm'
    }, {
        label: "Hours",
        value: 'hh'
    }];


    $scope.inactivity_settings = {
        status: false,
        inactive_time: 60 * 5 * 3, // 15 min (default value), that is, 900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.activity_settings = {
        status: false,
        active_time: 60 * 5 * 3, // 15 min (default value), that is,  900 seconds
        //time_format: 'ss', // Second (default value)
        time_format: $scope.timeFormatTemplates[0], // Default seconds object
    };

    $scope.changedTimeFormat = function (time_format) {
        'use strict';

        console.log('time changed');
        console.log(time_format);
        var newValue = time_format.value;

        // do your update settings stuffs
    }
});

Come puoi vedere nell'output del violino, qualunque cosa tu scelga per le opzioni della casella di selezione, è il tuo valore personalizzato o il valore 0, 1, 2 generato automaticamente da AngularJS, non importa nel tuo output a meno che tu non stia usando jQuery o qualsiasi altra libreria per accedere al valore di quelle opzioni di casella combinata selezionate e manipolarlo di conseguenza.

Un anno dopo la domanda, ho dovuto trovare una risposta per questa domanda poiché nessuna di queste ha dato la risposta effettiva, almeno per me.

Hai chiesto come selezionare l'opzione, ma nessuno ha detto che queste due cose NON sono uguali:

Se abbiamo un'opzione come questa:

$scope.options = [
    { label: 'one', value: 1 },
    { label: 'two', value: 2 }
  ];

E proviamo a impostare un'opzione predefinita come questa:

$scope.incorrectlySelected = { label: 'two', value: 2 };

Sarà NON funzionerà, ma se si tenta di selezionare l'opzione in questo modo:

$scope.correctlySelected = $scope.options[1];

Sarà LAVORARE .

Anche se questi due oggetti hanno le stesse proprietà, AngularJS li considera DIVERSI perché AngularJS confronta per riferimento .

Dai un'occhiata al violino http://jsfiddle.net/qWzTb/ .

Utilizza la traccia per proprietà che differenzia i valori e le etichette nella casella di selezione.

Vi preghiamo di provare

<select ng-options="obj.text for obj in array track by obj.value"></select>

che assegnerà etichette con testo e valore con valore (dall'array)

Per un oggetto:

<select ng-model="mySelect" ng-options="key as value for (key, value) in object"></select>

È sempre doloroso per gli sviluppatori con ng-options. Ad esempio: ottenere un valore selezionato vuoto / vuoto nel tag select. Soprattutto quando si tratta di oggetti JSON in ng-options, diventa più noioso. Qui ho fatto alcuni esercizi su questo.

Obiettivo: scorrere la matrice di oggetti JSON tramite ng-option e impostare il primo elemento selezionato.

Dati:

someNames = [{"id":"1", "someName":"xyz"}, {"id":"2", "someName":"abc"}]

Nel tag select ho dovuto mostrare xyz e abc, dove xyz deve essere selezionato senza troppi sforzi.

HTML:

<pre class="default prettyprint prettyprinted" style=""><code>
    &lt;select class="form-control" name="test" style="width:160px"    ng-options="name.someName for name in someNames" ng-model="testModel.test" ng-selected = "testModel.test = testModel.test || someNames[0]"&gt;
&lt;/select&gt;
</code></pre>

Con l'esempio di codice sopra, potresti uscire da questa esagerazione.

Un altro riferimento :

Il tutorial ANGULAR.JS: NG-SELECT E NG-OPTIONS mi ha aiutato a risolvere il problema:

<select id="countryId"
  class="form-control"
  data-ng-model="entity.countryId"
  ng-options="value.dataValue as value.dataText group by value.group for value in countries"></select>

<select ng-model="output">
   <option ng-repeat="(key,val) in dictionary" value="{{key}}">{{val}}</option>
</select>

Esegui lo snippet di codice e visualizza le varianti. Ecco una nota per una rapida comprensione

1. Esempio 1 (Selezione oggetto): - ng-option="os.name for os in osList track by os.id". Qui track by os.idè importante e dovrebbe esserci e os.id as NON dovrebbe esserlo prima os.name.

   • Il ng-model="my_os"mettessero un oggetto con chiave come id come my_os={id: 2}.

2. Esempio 2 (selezione valore): - ng-option="os.id as os.name for os in osList". Qui track by os.id NON dovrebbe esserci e os.id as dovrebbe esserci prima os.name.

   • L' ng-model="my_os"dovrebbe impostato su un valore similemy_os= 2

Lo snippet di codice di riposo spiegherà.

angular.module('app', []).controller('ctrl', function($scope, $timeout){
  
  //************ EXAMPLE 1 *******************
  $scope.osList =[
    { id: 1, name :'iOS'},
    { id: 2, name :'Android'},
    { id: 3, name :'Windows'}
  ]
  $scope.my_os = {id: 2};
  
  
  //************ EXAMPLE 2 *******************
  $timeout(function(){
    $scope.siteList = [
          { id: 1, name: 'Google'},
          { id: 2, name: 'Yahoo'},
          { id: 3, name: 'Bing'}
        ];
   }, 1000);
    
    $scope.my_site = 2;
  
    $timeout(function(){
      $scope.my_site = 3;
    }, 2000);
})

fieldset{
  margin-bottom: 40px;
  }
strong{
  color:red;
  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.10/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <!--//************ EXAMPLE 1 *******************-->
  <fieldset>
    <legend>Example 1 (Set selection as <strong>object</strong>)</legend>
    
    <select ng-model="my_os" ng-options="os.name for os in osList track by os.id">
        <option value="">--Select--</option>
      </select>
    {{my_os}}
    
  </fieldset>
  
  
  <!--//************ EXAMPLE 2 *******************-->
  <fieldset>
    <legend>Example 2 (Set selection as <strong>value</strong>. Simulate ajax)</legend>
      <select ng-model="my_site" ng-options="site.id as site.name for site in siteList">
        <option value="">--Select--</option>
      </select>
      {{my_site}}
  </fieldset>
  
</div>

Come molti hanno già detto prima, se ho dati di questo tipo:

countries : [
              {
                 "key": 1,
                 "name": "UAE"
             },
              {
                  "key": 2,
                  "name": "India"
              },
              {
                  "key": 3,
                  "name": "OMAN"
              }
         ]

Lo userei come:

<select
    ng-model="selectedCountry"
    ng-options="obj.name for obj  in countries">
</select>

Nel controller è necessario impostare un valore iniziale per eliminare il primo elemento vuoto:

 $scope.selectedCountry = $scope.countries[0];

 // You need to watch changes to get selected value
 $scope.$watchCollection(function() {
   return $scope.selectedCountry
 }, function(newVal, oldVal) {
     if (newVal === oldVal) {
       console.log("nothing has changed " + $scope.selectedCountry)
     } 
     else {
       console.log('new value ' + $scope.selectedCountry)
     }
 }, true)

Ecco come risolvo questo problema in un'applicazione legacy:

In HTML:

ng-options="kitType.name for kitType in vm.kitTypes track by kitType.id" ng-model="vm.itemTypeId"

In JavaScript:

vm.kitTypes = [
    {"id": "1", "name": "Virtual"},
    {"id": "2", "name": "Physical"},
    {"id": "3", "name": "Hybrid"}
];

...

vm.itemTypeId = vm.kitTypes.filter(function(value, index, array){
    return value.id === (vm.itemTypeId || 1);
})[0];

Il mio HTML visualizza correttamente il valore dell'opzione.

Direttiva ngOptions:

$scope.items = [{name: 'a', age: 20},{ name: 'b', age: 30},{ name: 'c', age: 40}];

• Caso 1) etichetta per valore nella matrice:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <p> age of selected item is : {{selectedItem.age}} </p>
      <select ng-model="selectedItem" ng-options="item.name for item in items">
      </select>
  </div>

Spiegazione dell'output (si supponga che sia selezionato il primo elemento)

selectedItem = {nome: 'a', età: 20} // [per impostazione predefinita, l'elemento selezionato è uguale all'elemento valore ]

selectedItem.age = 20

• Caso-2) selezionare come etichetta per valore nell'array:

  <div>
      <p>selected item is : {{selectedItem}}</p>
      <select ng-model="selectedItem" ng-options="item.age as item.name for item in items">
      </select>
  </div>

Spiegazione dell'output (si supponga che il primo elemento sia selezionato): selectedItem = 20 // [seleziona parte è item.age ]