Al ejecutar AngularJS 1.4.0-rc.1, el valor dentro de un ciclo ng-options contiene el tipo de la variable.
Ver el siguiente código:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.js"> </script> <script> angular.module("selectOptionsTest", []). controller("SelectOptionsController", ["$scope", function($scope) { $scope.options = [ {id: 1, label: "Item 1"}, {id: 2, label: "Item 2"}, {id: 3, label: "Item 3"} ]; }]); </script> <div ng-app="selectOptionsTest" ng-controller="SelectOptionsController"> <select ng-model="opt" ng-options="option.id as option.label for option in options"> </select> </div>Esto genera un código HTML que se ve así:
<select ng-options="option.id as option.label for option in options" ng-model="option" class="ng-pristine ng-valid ng-touched"> <option value="?" selected="selected"></option> <option value="number:1" label="Item 1">Item 1</option> <option value="number:2" label="Item 2">Item 2</option> <option value="number:3" label="Item 3">Item 3</option> </select> ¿Por qué el valor tiene como prefijo el tipo de variable, es decir, el number: ? En versiones anteriores de AngularJS (p. ej., la estable actual 1.3.15), los atributos de value se rellenan con los valores esperados de 1 , 2 y 3 .
Entonces, ¿es esto un error en 1.4.0-rc.1 o esos casos deben manejarse de manera diferente ahora?
Obviamente, hubo un cambio en la forma en que se maneja la directiva ngOptions . Este cambio se explica brevemente en las notas de migración de AngularJS 1.4 . Puede encontrar una descripción más detallada de los cambios en el mensaje de confirmación :
Al usar
ngOptions: la directiva aplica una clave sustituta como el valor del elemento<option>. Esta confirmación cambia la cadena real utilizada como clave sustituta. Ahora almacenamos una cadena que se calcula llamando ahashKeyen el elemento de la colección de opciones; anteriormente era el índice o clave del elemento de la colección.(Esto está de acuerdo con la forma en que el valor de la opción desconocida se representa en la directiva de selección).
Antes podrías haber visto:
<select ng-model="x" ng-option="i in items"> <option value="1">a</option> <option value="2">b</option> <option value="3">c</option> <option value="4">d</option> </select>Ahora será algo como:
<select ng-model="x" ng-option="i in items"> <option value="string:a">a</option> <option value="string:b">b</option> <option value="string:c">c</option> <option value="string:d">d</option> </select>Si el código de su aplicación se basó en este valor, que no debería ser así, deberá modificar su aplicación para acomodarlo. Puede encontrar que puede usar la
track byla función dengOptions, ya que esto brinda la capacidad de especificar la clave que está almacenada.
Esto significa que ahora necesita usar track by para obtener el mismo resultado que antes. Para corregir el ejemplo en la pregunta, debe verse así:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.js"> </script> <script> angular.module("selectOptionsTest", []). controller("SelectOptionsController", ["$scope", function($scope) { $scope.options = [ {id: 1, label: "Item 1"}, {id: 2, label: "Item 2"}, {id: 3, label: "Item 3"} ]; }]); </script> <div ng-app="selectOptionsTest" ng-controller="SelectOptionsController"> <select ng-model="opt" ng-options="option.id as option.label for option in options track by option.id"> </select> </div>Consulte la guía de migración para obtener una explicación oscura de este cambio importante, bajo el encabezado ngOptions .
Debido a 7fda214c , cuando ngOptions representa los valores de opción dentro del DOM, el código HTML resultante es diferente. Normalmente, esto no debería afectar su aplicación en absoluto, sin embargo, si su código se basa en inspeccionar la propiedad de valor de los elementos (que genera ngOptions), asegúrese de leer los detalles .