web-dev-qa-db-fra.com

Nom de modèle dynamique sous forme AngularJS

J'ai un formulaire AngularJS où j'utilise ng-repeat pour créer les champs du formulaire de manière dynamique en fonction d'une autre sélection. J'essaie de générer le nom du modèle de manière dynamique et je rencontre des problèmes.

<div class="form-group" ng-repeat="parameter in apiParameters">
  <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters.{{parameter.paramName}}" placeholder="{{parameter.paramTitle}}">
  </div>
</div>

Ce dont j'ai besoin, c’est d’évaluer quelque chose comme ng-model = "formData.parameters.fooId" ou ng-model = "formData.parameters.barId"

Ce qui précède génère une erreur: Erreur: [$ parse: syntax] Erreur de syntaxe: Le jeton '{' est un jeton inattendu dans la colonne 21 de l'expression [formData.parameters. {{Paramètre.nom.param}}] à [{{parameter.paramName}}].

Dans mon contrôleur j'ai:

$scope.formData = {};
$scope.formData = {
  settings:
  {
    apiEndpoint: '',
    method: 'get'
  },
  parameters: {}
};

J'ai aussi essayé ng-model = "formData.parameters. [Parameter.paramName]" (basé sur cette question Comment puis-je définir un nom de modèle dynamique dans AngularJS? ), Mais cela n'évalue pas pour définir la valeur du modèle ng. Je ne suis pas sûr que ce que j'essaie d'accomplir soit possible. Je suppose que je dois passer par le contrôleur pour obtenir ce que je veux, mais toute aide serait la bienvenue.

angularjsangular-ngmodel
11
jdiver

Il vous suffit d'utiliser la clé de hachage comme modèle:

<div class="form-group" ng-repeat="parameter in apiParameters">
  <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
  <div class="col-sm-3">
    <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters[parameter.paramName]" placeholder="{{parameter.paramTitle}}">
  </div>
</div>

Il existe de nombreuses autres approches, mais celle-ci est plus simple que d’autres.

24
Sergey Moiseev

J'ai testé cette solution mais cela pose un problème pour moi-même. Le problème est que le paramètre "formData" est affecté à chaque itération individuellement. En d'autres termes, si vous insérez une balisepreà chaque itération, vous verrez la valeur de chaque itération individuellement et vous ne pourrez pas obtenir tous les formData dans votre contrôleur après avoir soumis le formulaire.

Pour cela j'ai trouvé une solution très simple et c'est le ng-init !!!!

Ajoutez simplement ce code à votre formulaire et avant votre étiquette répétitive. Pour l'exemple de cette question, nous aurons:

<form ng-init="formData = []">
    <div class="form-group" ng-repeat="parameter in apiParameters">
        <label for="{{parameter.paramName}}" class="col-sm-2 control-label">{{parameter.paramTitle}}</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" name="{{parameter.paramName}}" id="{{parameter.paramName}}" ng-model="formData.parameters[parameter.paramName]" placeholder="{{parameter.paramTitle}}">
        </div>
    </div>
</form>
0
Mohammad Amin