How can i get dynamic form field values in angular?

Question

Below i have added dynamic form add and delete after submit i want to get all the form values .how can i do this ?? anyone help me out move forward

this is my jsfiddle link

http://jsfiddle.net/rnnb32rm/1438/

below i added my cod

 var app = angular.module('angularjs-starter', []); app.controller('MainCtrl', function($scope) { $scope.choices = [{id: 'choice1'}]; $scope.addNewChoice = function() { var newItemNo = $scope.choices.length+1; $scope.choices.push({'id':'choice'+newItemNo}); }; $scope.removeChoice = function() { var lastItem = $scope.choices.length-1; $scope.choices.splice(lastItem); }; $scope.OnSave = function() { console.log('sjs'); }; }); 

 fieldset{ background: #FCFCFC; padding: 16px; border: 1px solid #D5D5D5; } .addfields{ margin: 10px 0; } #choicesDisplay { padding: 10px; background: rgb(227, 250, 227); border: 1px solid rgb(171, 239, 171); color: rgb(9, 56, 9); } .remove{ background: #C76868; color: #FFF; font-weight: bold; font-size: 21px; border: 0; cursor: pointer; display: inline-block; padding: 4px 9px; vertical-align: top; line-height: 100%; } input[type="text"], select{ padding:5px; } 

  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> <div ng-app="angularjs-starter" ng-controller="MainCtrl"> <button class="addfields" ng-click="addNewChoice()">Add fields</button> <br> <label class="control-label col-sm-2">name</label> <input type="text" ng-model="name" name="" placeholder="Add name"> <br> <br> <label class="control-label col-sm-2">email</label> <input type="text" ng-model="email" name="" placeholder="Add emalil"> <br> <br> <fieldset data-ng-repeat="choice in choices"> <label class="control-label col-sm-2">Add Question</label> <input type="text" ng-model="choice.name" name="" placeholder="Add Question"> <br> <br> <label class="control-label col-sm-2">Question order</label> <input type="text" ng-model="choice.order" name="" placeholder="Add Question order"> <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button> </fieldset> <br> <br> <button type="submit" class="btn btn-primary" ng-click="OnSave()">Submit</button> <br> <br> <br> <div id="choicesDisplay"> {{ choices }} </div> </div> 

my expected result :

{

    "name": "test",
    "email": "asdf@gmail.com",
    "questions": [
        {
            "question": "Which of the following is the most important characteristic for a supervisor?",
            "questionorder": "1",

        },
        {
            "question": "Which of the following is the most important characteristic for a supervisor?",
            "questionorder": "2",

        }
    ]
}

Answer 1

//html
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
<button class="addfields" ng-click="addNewChoice()">Add fields</button><br>
                <label class="control-label col-sm-2">name</label>
                      <input type="text" ng-model="form.name" name="" placeholder="Add name"><br><br>
                <label class="control-label col-sm-2">email</label>
                      <input type="text" ng-model="form.email" name="" placeholder="Add emalil"><br><br>
   <fieldset  data-ng-repeat="choice in choices">

       <label class="control-label col-sm-2">Add Question</label>

                      <input type="text" ng-model="choice.name" name="" placeholder="Add Question"><br><br>


       <label class="control-label col-sm-2">Question order</label>
        <input type="text" ng-model="choice.order" name="" placeholder="Add Question order">


      <button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
   </fieldset><br><br>


                <button type="submit" class="btn btn-primary"  ng-click="OnSave(form, choices)">Submit</button><br><br><br>

   <div id="choicesDisplay" ng-repeat="obj in formData">
      {{ obj }}
   </div>
</div>

//js

var app = angular.module('angularjs-starter', []);

  app.controller('MainCtrl', function($scope) {

  $scope.choices = [{id: 'choice1'}];

  $scope.addNewChoice = function() {
    var newItemNo = $scope.choices.length+1;
    $scope.choices.push({'id':'choice'+newItemNo});
  };

  $scope.removeChoice = function() {
    var lastItem = $scope.choices.length-1;
    $scope.choices.splice(lastItem);
  };
  $scope.OnSave = function(form, choice) {
        $scope.formData = [];
      $scope.formData.push ({
        name: form.name,
        email: form.email,
        questions: choice
      });
      console.log($scope.formData);
  };

});

Answer 2

The function OnSave needs to be changed to this:

$scope.OnSave = function() {
  var result = {
    name: $scope.name,
    email: $scope.email,
    questions: $scope.choices.map(function(choice) {
      return { question: choice.name, questionorder: choice.order };
    })
  };

  console.log(result);
};

The result will contain the desired results. Alternatively, you can change how your data is saved in the model. You can create one variable $scope.data as follows:

$scope.data = {
  name: '',
  email: '',
  questions: [
    {
      id: 'choice1'
    }
  ]
};

And then bind your HTML to this. This way, you won't need to prepare your resultant data again at the time of saving. A working fiddle is here .

Answer 3

 var app = angular.module('angularjs-starter', []); app.controller('MainCtrl', function($scope) { $scope.obj = { name: '', email: '', questions: [] }; var emptyObj = { question: "", questionorder: "", options: [] }; var emptyOption = { val: "", key: "" }; $scope.addNewChoice = function() { $scope.obj.questions.push(angular.copy(emptyObj)); }; $scope.removeChoice = function(index) { $scope.obj.questions.splice(index, 1); }; $scope.addOptions = function(index) { if($scope.obj.questions[index].options.length == 6){ alert('maximum 6 options are allowed'); return; } $scope.obj.questions[index].options.push(angular.copy(emptyOption)); }; $scope.removeOption = function(parentIdx, index) { $scope.obj.questions[parentIdx].options.splice(index, 1); }; $scope.OnSave = function() { console.log('sjs'); }; }); 

 fieldset{ background: #FCFCFC; padding: 16px; border: 1px solid #D5D5D5; } .addfields{ margin: 10px 0; } #choicesDisplay { padding: 10px; background: rgb(227, 250, 227); border: 1px solid rgb(171, 239, 171); color: rgb(9, 56, 9); } .remove{ background: #C76868; color: #FFF; font-weight: bold; font-size: 21px; border: 0; cursor: pointer; display: inline-block; padding: 4px 9px; vertical-align: top; line-height: 100%; } input[type="text"], select{ padding:5px; } 

  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> <div ng-app="angularjs-starter" ng-controller="MainCtrl"> <button class="addfields" ng-click="addNewChoice()">Add fields</button><br> <label class="control-label col-sm-2">name</label> <input type="text" ng-model="obj.name" name="" placeholder="Add name"> <label class="control-label col-sm-2">email</label> <input type="text" ng-model="obj.email" name="" placeholder="Add emalil"><br><br> <fieldset data-ng-repeat="choice in obj.questions"> <label class="control-label col-sm-2">Add Question</label> <input type="text" ng-model="choice.question" name="" placeholder="Add Question"> <button type="button" ng-click="addOptions($index)"> Add options </button> <br><br> <label class="control-label col-sm-2">Question order</label> <input type="text" ng-model="choice.questionorder" name="" placeholder="Add Question order"> <button class="remove" ng-show="$last" ng-click="removeChoice($index)">-</button> <br> <div ng-repeat="opt in choice.options track by $index"> <input type="text" name="val" placeholder="val" ng-model="opt.val"> <input type="text" name="key" placeholder="key" ng-model="opt.key"> <button class="remove" ng-click="removeOption($parent.$index, $index)">-</button> </div> </fieldset><br><br> <button type="submit" class="btn btn-primary" ng- click="OnSave()">Submit</button><br><br><br> <div id="choicesDisplay"> {{obj | json}} </div> </div>