¿Cómo configuro la propiedad value en las opciones ng de AngularJS?


557

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.


12
Tuve el mismo problema porque no encontré los documentos (como se muestra a continuación) muy claros.
benvds

1
El uso de "seleccionar" como se representa en la pregunta es esencialmente incorrecto, porque "seleccionar" en este contexto, no es una palabra clave, pero es un marcador de posición para una expresión. Esto es de la documentación de AngularJS: "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". He proporcionado más detalles en mi respuesta a continuación.
Majix

Para mí esta es la mejor respuesta. stackoverflow.com/questions/12139152/…
Sanjay

1
Nota: Para que ng-options funcione, ng-model es obligatorio !!!!!!!!! Ref: stackoverflow.com/a/13049740/234110
Anand Rockzz

Respuestas:


698

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.


33
Su ejemplo no llena el atributo de valor de la opción. Define lo que se almacenaría en el modelo del elemento <select>. Vea la diferencia entre obj.value como obj.text y obj.text
Artem Andreev

57
Extraño pero obtengo <option value = "0"> 1st </option>, <option value = "1"> 2nd </option> en Chrome y FF.
Artem Andreev

49
No es un error, es una característica. angularjs maneja ngOptions y ngModel internamente, de esta manera le permite usar cualquier tipo de objeto como valor en la opción en lugar de solo cadenas. Nunca debe intentar obtener el valor de select al revés , solo necesita usar ngModel que adjuntó al elemento select.
Umur Kontacı

44
Siento disentir. Internamente, la directiva select podría usar fácilmente su propio modelo invisible para rastrear qué opción está seleccionada. Incluso si no rastrea el valor del modelo internamente, al menos podría representar las opciones y simplemente anteponer y seleccionar la opción vacía (que es el comportamiento que hace ahora si configura el modelo a un valor que no está en el conjunto de opciones) . La única dependencia para mostrar las opciones son las propias opciones: el principio POLA se aplica aquí.
Ezequiel Victor

3
¿Por qué esta respuesta tiene tantos votos positivos cuando no proporciona la respuesta? La respuesta de frm.adiputra es correcta.
Noishe

136

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>

15
+1 para explicar cómo Angular establece el atributo de valor de los elementos de opción.
Mark Rajcok

1
Esto no establece un valor. Valores predeterminados a números. Pero en realidad no puede especificar un "valor" ... ridículo ..
Viaje

13
@Trip, si 'inspecciona' las opciones de selección, verá números, pero si observa el valor enlazado en el modelo, el valor es en este caso el valor 'k'. Es confuso. blesh tiene un golpe que muestra esto en esta respuesta: stackoverflow.com/questions/13047923/… plnkr.co/edit/vJOljg?p=preview
TsenYing

44
Esto debe incluirse en el documento angular, breve y preciso. +1
devric

2
Esta es la única solución que funcionó para mí. Qué dolor de cabeza desagradable.
Jon

121

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


8
Esto funciona perfectamente Además, permite utilizar un elemento datalista con un <select> contenido para que el datalista pueda hacer referencia a las opciones a través de su valor. Gracias @Bruno Gomes
Climboid

3
Esta es la única solución que funciona para mí. Gracias.
Niner

99
Esta es la respuesta más apropiada para las ng-options con el valor del cuadro de opciones para que coincida con la matriz / objeto. Te hubiera dado 10000 puntos por salvar el día de todos si hubiera un sistema de intercambio de recompensas. La sintaxis más extraña del equipo angular.
webblover

2
¡GRACIAS! ¡Esto fue muy frustrante por mucho tiempo!
Sean Thompson

2
Espero que los precios de las habitaciones nunca sean iguales, porque entonces esto se rompe.
nilskp

47

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.


2
Yo agregaría que, en lugar de usar <input type="hidden" name="text" value="{{ text }}" />, usaría ng-value. Por lo tanto: <input type="hidden" name="text" ng-value="{{ text }}" />.
Dan Atkinson el

para aclarar en mi caso, no estoy enviando el formulario a través de Angular usando una publicación json, sino que estoy enviando el formulario normalmente usando la publicación http, por lo que anular los valores que Angular pone en la etiqueta <options> me permite enviar el formulario correcto valor (gracias!) No necesitaba usar ng-value en la entrada oculta, sino que necesitaba establecer la etiqueta de valor como las notas de la publicación original.
FireDragon

26

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.


24

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&lt;li /&gt; 's debajo de &lt;ul /&gt;' 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}}” />

¿mal rendimiento al usar ng-repeat en un elemento de opción, posiblemente? se supone que debes usar ng-options en la selección misma.
DrCord

@DrCord: el uso de ng-repeat en el elemento de opción se ofrece como una solución solo en casos aislados (cuando las páginas HTML MVC adecuadas no son necesarias para una ingeniería excesiva) Tal vez el votante no lo preparó muy de cerca. Será editado para llamar más específicamente que ng-repeat on option element no es el caso ideal.
Joshcodes

1
Como Angular N00b, habría seleccionado esta solución porque, en primera instancia, parece una sugerencia justa y es probable que funcione. La sintaxis sugerida en otras respuestas es, por decir lo menos, extraña, incluso si una de las muchas opciones funciona. Es una solución legítima y si evita la optimización prematura, está bien. El voto negativo es solo que parece.
Ian Lewis

2
Esto es lo que dice en el sitio web de AngularJS: docs.angularjs.org/api/ng/directive/select . "Note: ngOptions provides an iterator facility for the <option> element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present.". No se menciona el rendimiento, simplemente que ngOptions es una alternativa a ngRepeat.
Ian Lewis

@ IanLewis, gracias, eso tiene sentido. No tenía ningún sentido para mí por qué ngRepeat sería menos eficaz en las opciones de una selección independiente que en una etiqueta <li>.
Joshcodes

20

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>

8
Es mejor usar ng-options dentro del elemento selectivo / directiva. Por ejemplo, <select ng-model = "model" ng-options = "obj.id como obj.name para obj en la matriz">. Lo que tienes funciona, pero no funcionará con otras construcciones angulares. Por ejemplo, este clic ng no funcionará con su código: <a ng-click="model=1"> seleccione 1 </a>, pero funciona si se usan las opciones ng.
Mark Rajcok

Acabo de aparecer un error extraño por hacerlo de esta manera. Muchas búsquedas dolorosas me llevaron al descubrimiento de ng-options, y el error desapareció. El modelo ng parece requerir que el atributo de valor de las opciones sea numérico y ascendente desde 0. Si cambia el valor a un índice no numérico utilizando las etiquetas ng-repeat y <option>, los cambios en el modelo no siempre reflejar en el cuadro de selección.
Noishe

14

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.


Leyenda. Esto es exactamente lo que necesitaba. Gracias
Kildareflare

Genial, pero ¿cuál es el propósito de las teclas "Value"? No parecen ser necesarios.
mhenry1384

No relevante para el ejemplo. Simplemente son parte de los datos originales que me proporcionó mi cliente.
Jeffrey A. Gochin

11

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.


Waaaaat? Funciona para arreglos por todas partes en mis páginas, ¿estamos usando la misma versión de AngularJS?
KthProg

11

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.


Amo esta solución. Sus ayudantes angulares para esta directiva son innecesariamente complejos. Gracias por ser el autoproclamado juez de uso.
David Melin

9

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.


8

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 .



4

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


1
Aumente su respuesta de solo código con alguna explicación, para evitar la idea errónea de que StackOverflow es un servicio gratuito de escritura de código.
Yunnosch

3

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

3

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.


Más de un año después, le agradezco por la muestra de saqueador. Muy útil.
bob.mazzo

3

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.


3

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


3

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)


2

Para un objeto:

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

2

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 :


2

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>

Gracias por el enlace.
PHPst

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

1
ngOptions proporciona algunos beneficios, como reducir la memoria y aumentar la velocidad al no crear un nuevo alcance para cada instancia repetida, consulte: docs.angularjs.org/api/ng/directive/ngOptions
mggSoft

1

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


0

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)

0

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.


0

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 ]

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.