angularjs - usar - ng-options selected

AngularJS-Usando $ index en ng-options

Question

Si vinculo una matriz a una etiqueta SELECT usando lo siguiente:

<select ng-model="selData" ng-options="$index as d.name for d in data">

Las etiquetas OPCIÓN obtienen los valores de índice incrementales esperados (0, 1, 2, ...). Sin embargo, cuando selecciono algo del menú desplegable, el valor de selData está selData a undefined . ¿Debería funcionar realmente el enlace?

Por otro lado, si hago lo siguiente:

<select ng-model="selData" ng-options="d as d.name for d in data">

Las etiquetas de OPCIÓN obtienen el mismo índice, pero todo el objeto está vinculado en el cambio. No sé si Angular tiene la intención de admitir esto, o si es simplemente un buen efecto secundario / error.

Answer 1

$ index se define para ng-repeat, no select. Creo que esto explica lo undefined . (Entonces, no, esto no debería funcionar.)

Soportes angulares de encuadernación en todo el objeto. La documentación podría redactarse mejor para indicar esto, pero lo insinúa: "ngOptions ... debe usarse en lugar de ngRepeat cuando desee que el modelo seleccionado esté vinculado a un valor que no sea de cadena".

Answer 2

Dado que las matrices son muy similares a los objetos en JavaScript, puede utilizar la sintaxis para "orígenes de datos de objetos". El truco está en los paréntesis en la parte ng-options :

var choices = [
  ''One'',
  ''Two'',
  ''Three''
];

En la plantilla:

<select
  ng-model="model.choice"
  ng-options="idx as choice for (idx, choice) in choices">
</select>

Al final, model.choice tendrá el valor 0, 1 o 2. Cuando sea 0, verá ''One''; 1 mostrará ''Dos'', etc. Pero en el modelo, solo verá el valor del índice.

Adapté esta información de "Mastering Web Application Development with AngularJS" de PACKT Publishing y la verifiqué en la documentación de referencia de Angular para seleccionar .

Answer 3

No use $index dentro de las etiquetas seleccionadas. Use $index dentro de las etiquetas de opción si desea usar los índices de matriz como valores u opciones.

<option ng-repeat="user in users" value="{{user.username}}">{{$index+1}}</option>

Si desea usar valores internos, simplemente póngalos en el atributo de valor como expresión de enlace como

<option ng-repeat="user in users" value="{{$index+1}}">{{user.username}}</option>

y mi código de controlador será como:

var users = [''username'':''bairavan'', ''username'':''testuser''];

Answer 4

También puede usar ng-value = ''$ index'' en la etiqueta <option> .

<select ng-model="selData">
 <option ng-repeat="d in data track by $index" ng-value="$index">
   {{d.name}}
 </option>
</select>

Answer 5

Ya que no puedes usar $index pero puedes probar indexOf .

HTML

<div ng-app ng-controller="MyCtrl">
    <select 
          ng-model="selectedItem"
          ng-options="values.indexOf(selectedItem) as selectedItem for selectedItem in values"></select>
    selectedItem: {{selectedItem}}
</div>

Controlador

function MyCtrl($scope) {
    $scope.values = ["Value1","Value2"];
    $scope.selectedItem = 0;
}

Demo Fiddle

Comentario:

Array.prototype.indexOf no es compatible con IE7 (8)