Nom ng-model dynamique sous forme AngularJS

J'ai un AngularJS formulaire où je suis en utilisant ng-repeat pour construire les champs du formulaire dynamiquement en fonction d'une autre sélection. Je suis en train de générer le nom du modèle de manière dynamique et suis en cours d'exécution dans 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'eval pour quelque chose comme ng-model="formData.les paramètres.fooId" ou ng-model="formData.les paramètres.barId"

Les résultats ci-dessus à une erreur:
Erreur: [$parse:syntaxe] Erreur de Syntaxe: Token '{' est un jeton inattendu au niveau de la colonne 21 de l'expression [formData.les paramètres.{{paramètre.paramName}}] à partir de [{{paramètre.paramName}}].

Dans mon contrôleur, j'ai:

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

J'ai aussi essayé de ng-model="formData.les paramètres.[paramètre.paramName]" (basé sur cette question Comment puis-je définir un modèle dynamique nom dans AngularJS?), mais qui n'a pas d'eval et ne parvient pas à définir la ng-valeur de modèle. Je ne suis pas sûr si ce que je suis en train d'accomplir est encore possible. Je suppose que j'ai besoin de passer par le contrôleur pour obtenir ce que je veux, mais toute aide serait appréciée.

source d'informationauteur jdiver

  1. 24

    Vous avez juste besoin d'utiliser de 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 sont plus simples que d'autres.

  2. 0

    J'ai testé cette solution mais il a un problème pour mon auto. Le problème est que le paramètre "formData" est attribué à chaque itération individuellement. En d'autres termes, si vous insérez un pré balise à chaque itération, vous verrez la valeur de chaque itération, individuellement et vous ne pouvez pas obtenir tous les formData dans votre contrôleur après la soumission du formulaire.

    Pour ce que j'ai trouvé une solution très simple et c'est la ng-init !!!!

    Simplement ajouter ce code à votre forme et à l'avant de votre répétitif de la balise. 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>