Pregunta ngOptions da como resultado opciones con valores incorrectos


Estoy intentando renderizar el cuadro de selección y no funciona como se esperaba: los valores de las opciones son incorrectos. lo comprobé manual, de acuerdo con esto, la sintaxis para la matriz (en mi caso, la matriz de objetos) es

select as label for value in array

Así que esto es lo que estoy haciendo:

datos:

[{"id":"3","name":"asdasd","code":"asdads","group":"2","cost":"0"},{"id":"4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"}]

modelo:

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products"></select>

resultado representado:

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products" class="ng-pristine ng-valid">
    <option value="0" selected="selected">3</option>
    <option value="1">4</option>
</select>

como podemos ver, los valores de las opciones no se establecen en la identificación de los elementos.

Además, puede que esta no sea la sintaxis correcta cuando la fuente es una matriz, pero tengo los mismos resultados al intentar esto:

<select ng-model="productToBuy" ng-options="item.id as item.id for (key, item) in products"></select>

Puse este código en jsfiddle. Cualquier ayuda apreciada.


5
2017-12-18 12:51


origen


Respuestas:


Este es el comportamiento de la directiva ngOptions (la salida que está viendo, donde el valor es el índice del elemento y no la propiedad de id que está tratando de pasar desde su muestra de código). ngOptions vinculará los datos de la opción seleccionada a la variable que especificó en ngModel. Luego trabajaría con su variable de límite de datos en lugar del "valor" del propio elemento de opción.

Html:

<select ng-model="selected" ng-options="item.name for item in items"></select> {{ selected }}

JS:

$scope.items = [
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"},
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"}
];

En el ejemplo anterior, $ scope.selected representaría el elemento seleccionado real. A continuación, puede acceder a cualquiera de las propiedades del elemento seleccionado: $ scope.selected.name, $ scope.selected.code ... etc.

Si necesita preseleccionar un elemento con el ejemplo anterior, puede hacer lo siguiente:

$scope.items = [
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"},
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"}
];
$scope.selected = $scope.items[1]; // Pre-selected the 2nd item in your array

Si todavía necesita tener control total sobre sus atributos de valor, es mejor que use la directiva ng-repeat, pero recuerde que si hace esto, sus elementos seleccionados no estarán vinculados a su modelo.

EDITAR: Nota sobre la sintaxis de 'seleccionar como etiqueta para valor en matriz':

En caso de que sea útil, lo que estaba haciendo su "elemento.id como item.name para el artículo en los productos" en realidad estaba configurando su variable en la directiva ngModel al valor que especificó en la porción de selección de la sintaxis. Entonces, lo que está haciendo esa expresión es establecer la etiqueta como item.name, pero enlazando $ scope.selected al valor de item.id, en lugar de a la instancia completa del elemento en sí. Entonces, si se seleccionó su primer artículo en los ejemplos anteriores, $ scope.selected sería igual a "3". En realidad, no cambia el atributo de valor del elemento de opción en sí.


12
2017-12-18 14:22



Su tipo de datos en el objeto JSON para el id es un string y el valor de $scope.selected es integer. ¡Si cambias uno de ellos al otro, funcionaría bien!

El valor de las opciones seguirá siendo 0 y 1, pero el enlace de datos de Angular te servirá y vinculará el valor que has especificado en tu expresión (Identificación del artículo como item.name) al modelo ng de su elemento padre (el elemento seleccionado).


1
2017-12-18 14:00



Si no necesitas ng-model de select elemento y desea utilizar el valor seleccionado de select Elemento, luego implementarlo de esta manera:

<select>
  <option ng-repeat="item in items" value="{{item.value}}">
    {{item.text}}
  </option>
</select>

1
2017-08-05 12:37