javascript - 如何在 Angular 动态表单字段内添加动态表单字段？

Question

我已经使用 angular 创建了动态添加/删除表单元素。

我希望管理员可以先添加问题，然后管理员可以为该特定问题添加选项。

我在这里添加了我的代码“ADD QUESTION”工作正常但是一旦添加问题我们需要为那个特定问题创建选项“ADD OPTIONS”工作不正常

我已经添加了“ADD QUESTION”和“ADD OPTIONS”，但是当您添加 2 或 3 个问题并删除它时，它无法正常工作

例如，我为该问题添加了一个问题和 4 个选项。之后，如果我单击“添加问题”按钮，问题表单将带有 4 个选项字段，这里它应该只有一个选项表单字段。它重复第一个问题选项

帮助我前进

var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {

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

  $scope.addNewChoice = function() {
    var newItemNo = $scope.data.questions.length + 1;
    $scope.data.questions.push({
      'id': 'choice' + newItemNo
    });
  };
 
  $scope.removeChoice = function() {
    var lastItem = $scope.data.questions.length - 1;
    $scope.data.questions.splice(lastItem);
  };
  
  $scope.OnSave = function() {
    console.log($scope.data);
  };

  
   $scope.addNewoptions = function() {
    var newItemNo = $scope.data.questionoption.length + 1;
    $scope.data.questionoption.push({
      'id': 'option' + newItemNo
    });
  };

  $scope.removeOption = function() {
    var lastItem = $scope.data.questionoption.length - 1;
    $scope.data.questionoption.splice(lastItem);
  };
  
  
});

fieldset {
  background: #FCFCFC;
  padding: 16px;
  border: 1px solid #D5D5D5;
}
.fields {
  background: #FCFCFC;
  padding: 18px;
  border: 1px solid red;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="angularjs-starter" ng-controller="MainCtrl">
  <button class="addfields" ng-click="addNewChoice()">Add question</button>
  <br>
  <label class="control-label col-sm-2">name</label>
  <input type="text" ng-model="data.name" name="" placeholder="Add name">
  <br>
  <br>
  <label class="control-label col-sm-2">email</label>
  <input type="text" ng-model="data.email" name="" placeholder="Add emalil">
  <br>
  <br>
  <fieldset data-ng-repeat="choice in data.questions">
<button class="addfields" ng-click="addNewoptions()">Add options</button><br>
    <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><br><br>
     <div class="fields" data-ng-repeat="option in data.questionoption">
          
      <br>
			<label class="control-label col-sm-2">Add options</label>

			<input type="text" ng-model="option.options" name="" placeholder="Add options">
			<br>
			<br>


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


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


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

  <div id="choicesDisplay">
    {{ data.questions }}
  </div>
</div>

如果管理员添加了一个问题(我的预期结果):

{

    "name": "test",
    "email": "as@gmail.com",
    "questions": [{
        "question": "Which of the following is the most important characteristic for a supervisor?",
        "questionorder": "1",
        "options": [{
                "val": "Approachable",
                "key": "options1"
            },
            {
                "val": "Qualified",
                "key": "options3"
            },
            {
                "val": "Honest",
                "key": "options2"
            }
        ]
    }]
}

DEMO

Answer 1

请引用这个 fiddle 我已经更正了你的代码working

HTML代码

    <div ng-app="angularjs-starter" ng-controller="MainCtrl">
  <button class="addfields" ng-click="addNewChoice()">Add question</button>
  <br>
  <label class="control-label col-sm-2">name</label>
  <input type="text" ng-model="data.name" name="" placeholder="Add name">
  <br>
  <br>
  <label class="control-label col-sm-2">email</label>
  <input type="text" ng-model="data.email" name="" placeholder="Add emalil">
  <br>
  <br>
  <fieldset data-ng-repeat="choice in data.questions" ng-init="Index = $index">
<button class="addfields" ng-click="addNewoptions(Index)">Add options</button><br>
    <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><br><br>
     <div class="fields" data-ng-repeat="option in choice.options">

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

            <input type="text" ng-model="option.option" name="" placeholder="Add options">
            <br>
            <br>


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


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


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

  <div id="choicesDisplay">
 <!--    {{ data.questions }} -->
  </div>
</div>

Controller

    var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {

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

  $scope.addNewChoice = function() {
    var newItemNo = $scope.data.questions.length + 1;
    $scope.data.questions.push({
      'id': 'choice' + newItemNo,
      'options' : []
    });
  };

  $scope.removeChoice = function() {
    var lastItem = $scope.data.questions.length - 1;
    $scope.data.questions.splice(lastItem);
  };

  $scope.OnSave = function() {
    console.log($scope.data);
  };


  $scope.addNewoptions = function(quest) {
        var newItemNo = $scope.data.questions[quest].options.length + 1;
        $scope.data.questions[quest].options.push({
          'optid': 'option' + newItemNo
        });
  };

  $scope.removeOption = function(quest) {
    var lastItem = $scope.data.questions[quest].options.length - 1;
        $scope.data.questions[quest].options.splice(lastItem);

  };

});