javascript - 如何获取 Angular 动态表单字段值？

Question

下面我添加了动态表单添加和提交后删除，我想获取所有表单值。我该怎么做？有人帮助我前进

这是我的 jsfiddle 链接

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

下面我添加了我的鳕鱼

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>

我的预期结果:

{

    "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

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>