Génération dynamique de la forme des champs de saisie et de collecte de données de terrain dans un tableau

Je suis coincé avec cette petite tâche.
J'ai besoin de générer des champs de saisie de façon dynamique en cliquant sur "ajouter" bouton sur le formulaire.
La forme est censée créer DB schéma de la table. Ainsi, chaque champ de saisie est un nom de champ de la table DB.

Je suis OK générer les champs dynamiquement, mais ont de la difficulté à réunir les données réelles.

<form ng-controller="NewTableCtrl" ng-submit="submitTable()">
  <input type='text' ng-model='table.title' placeholder='Title:'>
  <input ng-repeat="field in fields" type='text' ng-model='table.fields' placeholder='Field:'>
  <div>
    <button type='submit'>Submit</button>
    <button ng-click="addFormField()">Add</button>
  </div>
</form>

.. et le contrôleur

.controller('NewTableCtrl', function($scope) {
  $scope.fields = [];
  $scope.table = {};

  $scope.addFormField = function () {
    $scope.fields.push({});
  }

  $scope.submitTable = function () {
    console.log($scope.table);
  }
});

L'air simple. Lorsque je clique sur le bouton "Ajouter" qu'il génère le nouveau champ de saisie, mais il le fait avec le même modèle objet (obveously). Et c'est là où mon incompréhension réside. J'ai pensé que si je déclare $scope.fields = [];dans le contrôleur, puis en répétant les données de champ il suffit d'aller dans le tableau. Mais il a juste fait écho à l'entrée dans chaque répétition champ de saisie. Je comprends maintenant que c'est la façon dont il est censé être avec une liaison bidirectionnelle.

La raison pour laquelle je pensais que comme c'est par l'analogie avec un simple formulaire de soumission où la répétition champ de saisie de noms de devenir un tableau dans l'URL sous forme codée des données.

Alors, comment puis-je résoudre ce problème? Le serveur a besoin d'obtenir un tableau de champs comme ceci: fields: [field1, field2 ...] ai-je besoin pour générer des champs de saisie avec différents portée variable pour chaque champ? Comment puis-je faire cela?

Est-ce plus complexe alors que je pensais et il doit être une directive? Si oui, s'il vous plaît, montrez-moi comment faire.

Grâce.

OriginalL'auteur r.sendecky | 2014-04-30

11

À droite vous êtes maintenant en itérant $scope.fields. Lorsque vous ajoutez un nouveau champ, vous poussez un objet vide dans $scope.fields, mais à chaque entrée de la ng-modèle de points de $scope.table.fields (qui est non-existant jusqu'à la première entrée écrit - il va tenir une variable de type string).

Pour ce cas simple d'utilisation que vous pourriez essayer:
```
app.controller('NewTableCtrl', function($scope) {

  $scope.table = { fields: [] };

  $scope.addFormField = function() {
    $scope.table.fields.push('');
  }

  $scope.submitTable = function() {
    console.log($scope.table);
  }

});
```
Et:
```
<input ng-repeat="field in table.fields track by $index" type='text' ng-model='table.fields[$index]' placeholder='Field:'>
```
Démo: http://plnkr.co/edit/6iZSIBa9S1G95pIMBRBu?p=preview

Je vous remercie. C'est gentil. J'ai appris à propos de track by. Est-il avantageux d'utiliser toujours track by pour des raisons de performances?
Vous êtes les bienvenus 🙂 Dans les situations plus complexes oui (bennadel.com/blog/...). Dans ce cas, il permet d'avoir plusieurs champs avec la même chaîne de valeur, sinon, vous obtenez: "Doublons dans un répéteur ne sont pas autorisés. L'utilisation de 'suivi par' expression pour spécifier des clés uniques.'
Je sais que c'est un vieux thread, toujours besoin de demander quelque chose. comment puis-je afficher des données dans le formulaire qui est créé à l'aide de code ci-dessus? Toute aide serait appréciée
Est-ce que tu veux dire? plnkr.co/modifier/F1OhZ8qcwLA75rQOoaWO?p=preview
merci pour votre réponse rapide. désolé d'être peu clair la première fois. En fait, j'ai json et je veux les convertir en json dans un formulaire avec les données. par exemple, j'ai json qui représente la zone de texte et de sa valeur. maintenant, j'ai besoin de le convertir à la zone de texte avec la valeur à l'intérieur.

OriginalL'auteur tasseKATT

Prendre un coup d'oeil à ce

Travail De Démonstration

html

<body>
<div ng-app=''>
    <div ng-controller="questionCtrl">
        <div>
            <ul>
                <li ng-repeat="elemnt in questionelemnt">

                    <div>
                        <div id={{elemnt.id}} style="display:inline" >
                            <span  ng-model="elemnt.question" ng-hide="editorEnabled" ng-click="editorEnabled=true">
                                {{elemnt.question}}
                            </span>
                            <div  ng-show="editorEnabled">
                                <input  ng-model="elemnt.question" ng-show="editorEnabled" >
                                <button href="#" ng-click="editorEnabled=false">Done editing</button>
                            </div>
                        </div>
                        <div style="display:inline">
                            <span>
                                <input type="text" ng-model="elemnt.answer" placeholder="Answer" required/>
                            </span>
                        </div>

                        <span ng-hide="elemnt.length == 1">

                             <button ng-click="questionelemnt.splice($index, 1)">Remove</button>

                        </span>
                    </div>
                    <hr/>
                </li>
                <li>
                     <button ng-click="addFormField($event)">Add</button>
                </li>
            </ul>
        </div>
        <div>
            <button ng-click="showitems($event)">Submit</button>
        </div>
        <div id="displayitems" style="visibility:hidden;">
            {{questionelemnt}}
        </div>
    </div>
</div>
</body>

script

function questionCtrl($scope) {
    var counter = 0;
    $scope.questionelemnt = [{
        id: counter,
        question: 'Question-Click on me to edit!',
        answer: ''
    }];

    $scope.addFormField = function ($event) {
        counter++;
        $scope.questionelemnt.push({
            id: counter,
            question: 'Question-Click on me to edit!',
            answer: ''
        });
        $event.preventDefault();
    }

    $scope.showitems = function ($event) {
        $('#displayitems').css('visibility', 'none');
    }
}

OriginalL'auteur Nidhish Krishnan

Variation de tasseKATTs solution à l'aide d'une table de hachage au lieu d'un tableau.
Cela me permet d'avoir un bel objet JSON je peux juste-en cours afin de développer mon filtre de requête.

http://plnkr.co/edit/CArP3Lkmn7T5PEPdXgNt?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style>
      div{ margin: 1em;}
      input{margin-left:1em;}
    </style>
  </head>

  <body ng-controller="myCtrl">

    <h2>Using a filter map tied to ng-model to create a filter object</h2>

    <div ng-repeat="field in fields">
      {{field}}<input ng-model=filters[field] />
    </div>

    <hr>
    <h3>Filter</h3>
    {{filters}}

    <script>

      var app=angular.module("app",[]);

      app.controller("myCtrl",function($scope){
        $scope.filters={};
        $scope.fields=["name","address","phone","state"];
      });

      angular.bootstrap(document,["app"]);

    </script>

  </body>

</html>

OriginalL'auteur mccainz

Vous devez vous connecter pour publier un commentaire.