Javascript 动态添加数据绑定的角度表单提交

我有一张表格：

<form ng-controller="NtCtrl" ng-submit="submitExercise()">

  <!-- Question input -->
  <input ng-model="exercise.question"/>

  <!-- Dynamically add answer options here -->
  <div id="options"></div>

  <!-- Click this button to add new field -->
  <button type="button" onclick="newAnswer()">Add answer</button>

  <!-- Click this button to submit form -->
  <button type="submit">Submit question</button>
</form>

我想通过按下按钮动态地为问题添加答案选项。问题是当我提交表单时，答案不在

$scope.exercise

中。我怀疑这是因为这些字段是在呈现原始html之后添加的

---

我怎样才能解决这个问题呢？

这并不是一种有角度的做事方式。您希望修改绑定到视图的数据结构。创建一个答案数组，当您希望显示另一行时，只需按此数组即可：

<div id="options">
    <p ng-repeat="answer in answers">
        <input type="text" ng-model="answer.text" />
    </p>
</div>

<button type="button" ng-click="newAnswer()">Add answer</button>

---

这真的不是一种有棱角的做事方式。您希望修改绑定到视图的数据结构。创建一个答案数组，当您希望显示另一行时，只需按此数组即可：

<div id="options">
    <p ng-repeat="answer in answers">
        <input type="text" ng-model="answer.text" />
    </p>
</div>

<button type="button" ng-click="newAnswer()">Add answer</button>

<div id="options">
    <p ng-repeat="answer in answers">
        <input type="text" ng-model="answer.text" />
    </p>
</div>

<button type="button" ng-click="newAnswer()">Add answer</button>

angular.module('myApp').controller('NtCtrl', function($scope) {
    $scope.answers = [];

    $scope.newAnswer = function() {
        $scope.answers.push({text:"Sample"});
    }

    $scope.submitExercise = function() {
        console.log($scope.answers);
    });
});