javascript - array - ¿Cómo generar dinámicamente ng-model="my_{{$ index}}" con ng-repeat en AngularJS?

ng-repeat group by

Question

Me gustaría preguntarte si puedes ayudarme con esto.

He creado un jsfiddle con mi problema here . Necesito generar dinámicamente algunas entradas con ng-model en un ng-repetidor usando la forma ng-model = "my _ {{$ index}}".

En jsfiddle puedes ver que todo funciona bien hasta que intento generarlo dinámicamente.

El html sería:

<div ng-app>
<div ng-controller="MainCtrl">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<select ng-model="selectedQuery"
ng-options="q.name for q in queryList" >
<option title="---Select Query---" value="">---Select Query---</option>
</select>
</td>
</tr>
<tr ng-repeat="param in parameters">
<td>{{param}}:</td>
<td><input type="text" ng-model="field_X" />field_{{$index}}</td>
</tr>
</table>
<div>
<div>

Y el javascript ...

function MainCtrl($scope) {
$scope.queryList = [
{ name: ''Check Users'', fields: [ "Name", "Id"] },
{ name: ''Audit Report'', fields: [] },
{ name: ''Bounce Back Report'', fields: [ "Date"] }
];
$scope.$watch(''selectedQuery'', function (newVal, oldVal) {
$scope.parameters = $scope.selectedQuery.fields;
});
}

¿Me puedes dar alguna idea?

Muchas gracias.

Answer 1

¿Hay alguna razón para generar esos nombres de campo? ¿Puede tratar cada campo como un objeto con nombre y valor en lugar de un nombre de cadena? (FIDDLE)

function MainCtrl($scope) {
$scope.queryList = [
{ name: ''Check Users'', fields: [ { name: "Name" }, { name: "Id" } ] },
{ name: ''Audit Report'', fields: [] },
{ name: ''Bounce Back Report'', fields: [ { name: "Date" } ] }
];
}

Y simplemente repita la selectedQuery.fields de selectedQuery.fields :

<tr ng-repeat="field in selectedQuery.fields">
<td>{{field.name}}:</td>
<td><input type="text" ng-model="field.value" /></td>
</tr>

Answer 2

¿Resuelve tu problema?

function MainCtrl($scope) {
$scope.queryList = [
{ name: ''Check Users'', fields: [ "Name", "Id"] },
{ name: ''Audit Report'', fields: [] },
{ name: ''Bounce Back Report'', fields: [ "Date"] }
];
$scope.models = {};
$scope.$watch(''selectedQuery'', function (newVal, oldVal) {
if ($scope.selectedQuery) {
$scope.parameters = $scope.selectedQuery.fields;
}
});
}

Y en tu mando:

 <tr ng-repeat="param in parameters">
<td>{{param}}:</td>
<td><input type="text" ng-model="models[param] " />field_{{$index}}</td>
</tr>

Fiddle

Answer 3

Elaboré mi respuesta a partir de pkozlowski e intenté generar una forma dinámica, con el modelo dinámico ng:

<form ng-submit="testDynamic(human)">
<input type="text" ng-model="human.adult[($index+1)].name">
<input type="text" ng-model="human.adult[($index+1)].sex">
<input type="text" ng-model="human.adult[($index+1)].age">
</form>

Pero primero, debemos definir el alcance ''humano'' dentro de nuestro controlador

$scope.human= {};

Y luego, en el momento del envío, tendremos los datos como este (dependiendo de la cantidad de campo que se genere):

var name = human.adult[i].name;
var sex = human.adult[i].sex;
var age = human.adult[i].age;

Es bastante sencillo y espero que mi respuesta ayude.

Answer 4

La respuesta de Beterraba fue muy útil para mí. Sin embargo, cuando tuve que migrar la solución a Typescript, no funcionaría para mí. Esto es lo que hice en su lugar. Expandí los parámetros individuales (campos en la lista de consulta en su ejemplo) en objetos completos que incluían un campo de "valor". Entonces me uní al campo "valor" y funcionó muy bien!

Originalmente tenías:

[
{ name: ''Check Users'', fields: [ "Name", "Id"] },
...
}
]

Lo cambié por algo como esto:

[
{ name: ''Check Users'', fields: [
{Text:"Name",Value:""},
{Text:"Id",Value:0}],
...
]
}
]

... y enlazado al subcampo ''Valor''.

Aquí está mi Typescript si te importa.

En el html:

<div ng-repeat="param in ctrl.sprocparams" >
<sproc-param param="param" />
</div>

En la directiva sproc-param que utiliza material angular. Vea donde enlace el modelo ng a param.Value:

return {
restrict: ''E'',
template: `
<md-input-container class="md-block" flex-gt-sm>
<label>{{param.Name}}</label>
<input name="{{param.Name}}" ng-model=param.Value></input>
</md-input-container>`,
scope: {
param: "="
}
}

Answer 5

Lo que podría hacer es crear un objeto en un ámbito (por ejemplo, values ) y vincularlo a las propiedades de este objeto de la siguiente manera:

<input type="text" ng-model="values[''field_'' + $index]" />

Aquí hay un jsFiddle que ilustra la solución completa: http://jsfiddle.net/KjsWL/