web-dev-qa-db-fra.com

Comment générer dynamiquement ng-model = "my _ {{$ index}}" avec ng-repeat dans AngularJS?

Je voudrais vous demander si vous pouvez me donner un coup de main à ce sujet.

J'ai créé un jsfiddle avec mon problème ici . J'ai besoin de générer dynamiquement des entrées avec ng-model dans un répéteur ng en utilisant la méthode ng-model = "my _ {{$ index}}".

Dans jsfiddle, vous pouvez voir que tout fonctionne correctement jusqu'à ce que j'essaie de le générer dynamiquement.

Le html serait:

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

Et le 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;
  });
}

Pouvez-vous me donner une idée?

Merci beaucoup.

javascriptangularjsng-repeat
42
Federico Piazza

Cela résout-il votre problème?

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;
        }
    });
}

Et dans votre contrôleur:

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

Fiddle

44
Beterraba

Ce que vous pouvez faire est de créer un objet sur une portée (par exemple, values) et de lier les propriétés de cet objet comme suit

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

Voici un jsFiddle illustrant la solution complète: http://jsfiddle.net/KjsWL/

22
pkozlowski.opensource

J'ai élaboré ma réponse à partir de pkozlowski et essayé de générer une forme dynamique, avec un modèle ng dynamique:

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

Mais d’abord, nous devons définir la portée «humaine» dans notre contrôleur.

$scope.human= {};

Et puis, lors de la soumission, nous aurons les données comme ceci (en fonction de la quantité de champ générée):

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

C'est assez simple et j'espère que ma réponse aidera. 

3
FirdhausKM

Existe-t-il une raison pour générer ces noms de champs? Pouvez-vous traiter chaque champ comme un objet avec un nom et une valeur plutôt qu'un nom de chaîne? (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" } ] } 
      ];
}

Et répétez simplement selectedQuery.fields:

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

La réponse de Beterraba m'a été très utile. Cependant, lorsque je devais migrer la solution vers TypeScript, elle ne se comportait pas pour moi. Voici ce que j'ai fait à la place. J'ai développé les paramètres individuels (champs de la liste queryList dans votre exemple) en objets complets contenant un champ "valeur". Je me suis ensuite lié au champ "valeur" et cela a très bien fonctionné!

À l'origine, vous aviez:

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

Je l'ai changé en quelque chose comme ceci:

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

... et lié au sous-champ 'Valeur'.

Voici mon TypeScript si vous vous en souciez.

Dans le html:

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

Dans la directive sproc-param utilisant le matériau angulaire. Voir où je lie le modèle-ng à 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: "="
        }
}
0
Marcus Cole