Question

下面我添加动态表单添加和删除提交后我想获得所有的表单值。我可以这样做吗？任何人帮助我前进

这是我的jsfiddle链接

下面我添加了我的鳕鱼

＆＃13;

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');
  };
  
});

＆＃13;

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;
}

＆＃13;

   <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>

＆＃13;

我的预期结果：

{

    "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

函数OnSave需要更改为：

$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);
};

result将包含所需的结果。或者，您可以更改数据在模型中的保存方式。您可以按如下方式创建一个变量$scope.data：

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

然后将HTML绑定到此。这样，您就不需要在保存时再次准备结果数据。一个工作小提琴是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>

如何获得角度的动态表单字段值？

3 个答案: