Esto es lo que parece estar molestando a mucha gente (incluido yo).

Cuando uso la ng-optionsdirectiva en AngularJS para completar las opciones de una <select>etiqueta, no puedo entender cómo establecer el valor de una opción. La documentación para esto realmente no está clara, al menos para un tonto como yo.

Puedo configurar el texto para una opción fácilmente así:

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

Cuando resultOptionses por ejemplo:

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

Debería ser (y probablemente lo sea) lo más simple para establecer los valores de las opciones, pero hasta ahora no lo entiendo.

Ver ngOpciones

ngOptions (opcional) - { comprehension_expression=} - en una de las siguientes formas:

Para orígenes de datos de matriz : 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 para orígenes de datos de objeto: 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

En su caso, debería ser

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

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

Actualizar

Con las actualizaciones en AngularJS, ahora es posible establecer el valor real para el valueatributo del selectelemento con track byexpresión.

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

Cómo recordar estas cosas feas

Para todas las personas que están teniendo dificultades para recordar esta forma de sintaxis: Estoy de acuerdo en que esta no es la sintaxis más fácil o hermosa. Esta sintaxis es una especie de versión extendida de las comprensiones de la lista de Python y su conocimiento me ayuda a recordar la sintaxis muy fácilmente. Es algo como esto:

Código de 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']

Esta es en realidad la misma sintaxis que la primera listada anteriormente. Sin embargo, <select>generalmente necesitamos diferenciar entre el valor real en el código y el texto que se muestra (la etiqueta) en un <select>elemento.

Como, necesitamos person.iden el código, pero no queremos mostrarlo idal usuario; Queremos mostrar su nombre. Del mismo modo, no estamos interesados person.nameen el código. Llega la aspalabra clave para etiquetar cosas. Entonces se vuelve así:

person.id as person.name for person in people

O, en lugar de person.ideso, podríamos necesitar la personinstancia / referencia en sí. Vea abajo:

person as person.name for person in people

Para los objetos JavaScript, también se aplica el mismo método. Solo recuerda que los elementos del objeto se deconstruyen con (key, value)pares.

Cómo los atributos de valor obtienen su valor:

• Cuando se usa una matriz como fuente de datos, será el índice del elemento de la matriz en cada iteración;
• Cuando se usa un objeto como fuente de datos, será el nombre de la propiedad en cada iteración.

Entonces, en su caso, debería ser:

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

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

También tuve este problema. No pude establecer mi valor en ng-options. Cada opción que se generó se configuró con 0, 1, ..., n.

Para hacerlo bien, hice algo como esto en mis ng-options:

HTML:

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

Uso "track by" para establecer todos mis valores con room.price.

(Este ejemplo apesta: porque si hubiera más de un precio igual, el código fallaría. ASEGÚRESE de tener valores diferentes).

JSON

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

Lo aprendí de la publicación del blog Cómo establecer el valor inicial seleccionado de un elemento seleccionado usando Angular.JS ng-options & track by .

Ver el vídeo. Es una buena clase :)

Si quieres cambiar el valor de tu option elementos porque el formulario finalmente se enviará al servidor, en lugar de hacerlo,

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

Puedes hacerlo:

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

El valor esperado se enviará a través del formulario con el nombre correcto.

Para enviar un valor personalizado llamado my_hero al servidor utilizando un formulario normal, envíe:

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}}" />

El servidor recibirá uno irono superel valor demy_hero .

Esto es similar a la respuesta de @neemzy , pero especifica datos separados para el valueatributo.

Parece que ng-optionses complicado (posiblemente frustrante) de usar, pero en realidad tenemos un problema de arquitectura.

AngularJS sirve como un marco MVC para una aplicación dinámica de HTML + JavaScript. Si bien su componente (V) iew ofrece "plantillas" HTML, su propósito principal es conectar las acciones del usuario, a través de un controlador, a los cambios en el modelo. Por lo tanto, el nivel apropiado de abstracción, desde el cual trabajar en AngularJS, es que un elemento de selección establece un valor en el modelo en un valor de una consulta .

• La forma en que se presenta una fila de consulta al usuario es asunto de (V) iew y ng-optionsproporciona la forpalabra clave para dictar cuál debería ser el contenido del elemento de opción, es decir p.text for p in resultOptions .
• La forma en que se presenta una fila seleccionada al servidor es asunto del (M) odel. Por lo tanto, ng-optionsproporciona la aspalabra clave para especificar qué valor se proporciona al modelo como en k as v for (k,v) in objects.

La solución correcta, este problema es de naturaleza arquitectónica e implica refactorizar su HTML para que el (M) odel realice la comunicación del servidor cuando sea necesario (en lugar de que el usuario envíe un formulario).

Si una página HTML de MVC no es necesaria una ingeniería excesiva para el problema en cuestión: utilice solo la parte de generación de HTML del componente iew de AngularJS (V). En este caso, siga el mismo patrón que se utiliza para generar elementos como<li /> 's debajo de <ul />' s y coloque una repetición ng en un elemento de opción:

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

Como kludge , siempre se puede mover el atributo de nombre del elemento seleccionado a un elemento de entrada oculto:

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

Puedes hacerlo:

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

- ACTUALIZACIÓN

Después de algunos cambios, el usuario frm.adiputra solución 's es mucho mejor. Código:

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

He luchado con este problema por un tiempo hoy. Leí la documentación de AngularJS, esta y otras publicaciones y algunos blogs a los que llevan. Todos me ayudaron a asimilar los detalles más finos, pero al final esto parece ser un tema confuso. Principalmente debido a los muchos matices sintácticos de ng-options.

Al final, para mí, todo se redujo a menos es más.

Dado un alcance configurado de la siguiente manera:

        //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
        };

Esto es todo lo que necesitaba para obtener el resultado deseado:

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

Aviso que no usé track by. El uso track bydel elemento seleccionado siempre devolvería el objeto que coincidía con el ID de firmeza, en lugar del ID de firmeza mismo. Esto ahora cumple con mis criterios, que es que debería devolver un valor numérico en lugar del objeto, y usarng-options para obtener la mejora del rendimiento que proporciona al no crear un nuevo alcance para cada opción generada.

Además, necesitaba la primera fila en blanco, por lo que simplemente añadido una <option>a la<select> elemento.

Aquí hay un Plunkr que muestra mi trabajo.

En lugar de utilizar la nueva función 'seguimiento por', simplemente puede hacer esto con una matriz si desea que los valores sean los mismos que el texto:

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

Tenga en cuenta la diferencia entre la sintaxis estándar, que hará que los valores sean las claves del objeto / matriz y, por lo tanto, 0,1,2, etc. para una matriz:

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

k como v convierte en v como v .

Descubrí esto solo basado en el sentido común mirando la sintaxis. (k, v) es la declaración real que divide la matriz / objeto en pares de valores clave.

En la declaración 'k as v', k será el valor y v será la opción de texto que se muestra al usuario. Creo que 'track by' es desordenado y excesivo.

Esto fue el más adecuado para todos los escenarios según yo:

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

donde puede usar su modelo para vincular los datos. Obtendrá el valor que contendrá el objeto y la selección predeterminada según su escenario.

Así es como resolví esto. Rastreé la selección por valor y configuré la propiedad del elemento seleccionado para el modelo en mi código 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">

vmes mi controlador y el país en el controlador recuperado del servicio es {CountryId =1, Code = 'USA', CountryName='United States of America'}.

Cuando seleccioné otro país del menú desplegable de selección y publiqué mi página con "Guardar", obtuve el límite de país correcto.

La ng-optionsdirectiva no establece el atributo de valor en los <options>elementos para matrices:

Usando limit.value as limit.text for limit in limitsmedios:

establecer la <option>etiqueta como limit.text
guardar el limit.valuevalor en la selecciónng-model

Consulte la pregunta sobre desbordamiento de pila. AngularJS ng-options no representa valores .

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

Puede usar ng-options para lograr seleccionar el enlace de la etiqueta al valor y mostrar miembros

Mientras usa esta fuente de datos

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

puede usar lo siguiente para vincular su etiqueta de selección al valor y al nombre

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

funciona muy bien

La respuesta correcta a esta pregunta ha sido proporcionada por el usuario frm.adiputra , ya que actualmente parece ser la única forma de controlar explícitamente el atributo de valor de los elementos de opción.

Sin embargo, solo quería enfatizar que "seleccionar" no es una palabra clave en este contexto, sino que es solo un marcador de posición para una expresión. Consulte la siguiente lista para ver la definición de la expresión "select" y otras expresiones que se pueden usar en la directiva ng-options.

El uso de select como se muestra en la pregunta:

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

Es esencialmente incorrecto.

Según la lista de expresiones, parece que trackexpr se puede usar para especificar el valor, cuando las opciones se dan en una matriz de objetos, pero se ha usado solo con agrupación.

De la documentación de AngularJS para ng-options:

• matriz / objeto : una expresión que se evalúa como una matriz / objeto para iterar.
• valor : variable local que se referirá a cada elemento de la matriz o a cada valor de propiedad del objeto durante la iteración.
• clave : variable local que se referirá a un nombre de propiedad en el objeto durante la iteración.
• etiqueta : el resultado de esta expresión será la etiqueta del elemento. La expresión probablemente se referirá a la variable de valor (por ejemplo, value.propertyName).
• select : el resultado de esta expresión estará vinculado al modelo del elemento padre. Si no se especifica, la expresión de selección tendrá el valor predeterminado.
• group : El resultado de esta expresión se usará para agrupar opciones usando el elemento DOM.
• trackexpr : se utiliza cuando se trabaja con una matriz de objetos. El resultado de esta expresión se usará para identificar los objetos en la matriz. El trackexpr probablemente se referirá a la variable de valor (por ejemplo, value.propertyName).

Seleccionar un elemento en ng-options puede ser un poco complicado dependiendo de cómo configure la fuente de datos.

Después de luchar con ellos por un tiempo, terminé haciendo una muestra con las fuentes de datos más comunes que uso. Lo puedes encontrar aquí:

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

Ahora, para que las opciones ng funcionen, aquí hay algunas cosas a tener en cuenta:

1. Normalmente obtiene las opciones de una fuente y el valor seleccionado de otra. Por ejemplo:
   • states :: data para ng-options
   • user.state :: Opción para establecer como seleccionado
2. Basado en 1, lo más fácil / lógico es llenar la selección con una fuente y luego establecer el valor a través del código. Rara vez sería mejor obtener un conjunto de datos mixto.
3. AngularJS permite que controles selectos contengan más de key | label. Muchos ejemplos en línea colocan los objetos como 'clave', y si necesita información del objeto, configúrelo de esa manera, de lo contrario, use la propiedad específica que necesita como clave. (ID, CÓDIGO, etc. Como en la muestra plckr)

4. La forma de establecer el valor del control desplegable / de selección depende del n. ° 3,

   • Si la clave desplegable es una propiedad única (como en todos los ejemplos en plunkr), simplemente configúrela, por ejemplo: $scope.dropdownmodel = $scope.user.state;

   • Si configura el objeto como clave, debe recorrer las opciones, incluso asignar el objeto no configurará el elemento como seleccionado, ya que tendrán diferentes hashkeys, por ejemplo:

     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;
       }
     }

Puede reemplazar savedValue para la misma propiedad en el otro objeto, $scope.myObject.myProperty.

Para mí, la respuesta de Bruno Gomes es la mejor respuesta.

Pero en realidad, no necesita preocuparse por establecer la propiedad de valor de las opciones seleccionadas. AngularJS se encargará de eso. Déjame explicarte en detalle.

Por favor considere este violín

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
    }
});

Como puede ver en la salida del violín, lo que elija para las opciones del cuadro de selección, es su valor personalizado o el valor 0, 1, 2 generado automáticamente por AngularJS, no importa en su salida a menos que esté utilizando jQuery o cualquier otra biblioteca para acceder al valor de las opciones del cuadro combinado seleccionado y manipularlo en consecuencia.

Un año después de la pregunta, tuve que encontrar una respuesta para esta pregunta, ya que ninguno de ellos dio la respuesta real, al menos para mí.

Ha preguntado cómo seleccionar la opción, pero nadie ha dicho que estas dos cosas NO son lo mismo:

Si tenemos opciones como esta:

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

E intentamos establecer una opción predeterminada como esta:

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

Será NO trabajar, pero si se intenta seleccionar la opción de la siguiente manera:

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

Será TRABAJAR .

A pesar de que estos dos objetos tienen las mismas propiedades, AngularJS los considera DIFERENTES porque AngularJS se compara por la referencia .

Eche un vistazo al violín http://jsfiddle.net/qWzTb/ .

Utilice el seguimiento por propiedad que diferencia los valores y las etiquetas en el cuadro de selección.

Por favor, inténtalo

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

que asignará etiquetas con texto y valor con valor (de la matriz)

Para un objeto:

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

Siempre es doloroso para los desarrolladores con ng-options. Por ejemplo: Obtener un valor seleccionado vacío / en blanco en la etiqueta de selección. Especialmente cuando se trata con objetos JSON en ng-options, se vuelve más tedioso. Aquí he hecho algunos ejercicios sobre eso.

Objetivo: iterar la matriz de objetos JSON a través de la opción ng y establecer el primer elemento seleccionado.

Datos:

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

En la etiqueta de selección tuve que mostrar xyz y abc, donde xyz debe seleccionarse sin mucho esfuerzo.

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>

Por ejemplo de código anterior, puede salir de esta exageración.

Otra referencia :

El tutorial ANGULAR.JS: NG-SELECT Y NG-OPTIONS me ayudó a resolver el 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>

Ejecute el fragmento de código y vea las variaciones. Aquí hay una nota para una comprensión rápida

1. Ejemplo 1 (Selección de objeto): - ng-option="os.name for os in osList track by os.id". Aquí track by os.ides importante y debería estar allí y os.id as NO debería haberlo hecho antes os.name.

   • El ng-model="my_os"debería establecerse en un objeto con clave como id como my_os={id: 2}.

2. Ejemplo 2 (Selección de valor): - ng-option="os.id as os.name for os in osList". Aquí track by os.id NO debería estar allí y os.id as debería estar allí antes os.name.

   • El ng-model="my_os"debería establecerse en un valor comomy_os= 2

El fragmento de código de descanso lo explicará.

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>

Como muchos dijeron antes, si tengo datos como este:

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

Lo usaría como:

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

En su controlador, debe establecer un valor inicial para deshacerse del primer elemento vacío:

 $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)

Así es como resuelvo este problema en una aplicación heredada:

En HTML:

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

En 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];

Mi HTML muestra el valor de la opción correctamente.

Directiva ngOptions:

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

• Caso-1) etiqueta para el valor en la matriz:

  <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>

Explicación de salida (Suponga que el primer elemento seleccionado):

selectedItem = {name: 'a', age: 20} // [por defecto, el elemento seleccionado es igual al elemento de valor ]

selectedItem.age = 20

• Caso-2) seleccione como etiqueta para el valor en la matriz:

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

Explicación de salida (Suponga que el primer elemento seleccionado): selectedItem = 20 // [la parte seleccionada es item.age ]