Угловое представление формы с креплениями динамически добавленные данные

Question

У меня есть форма:

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

с некоторыми JavaScript:

<script type="text/javascript"> 

    var count = 1; 

    function newAnswer() { 
    var input = document.createElement('input'); 
    var attr = document.createAttribute('ng-model'); 
    attr.value = "exercise.answers." + qid; 
    input.setAttributeNode(attr); 

    document.getElementById('options').appendChild(input); 

    count ++; 
    } 

</script> 

и угловой контроллер:

angular.module('myApp').controller('NtCtrl', function($scope) { 
    $scope.exercise = {}; 
    $scope.submitExercise = function() { 
     console.log($scope.exercise); 
    }); 
}); 

Я хочу, чтобы динамически добавьте ответы на вопрос, нажав кнопку. Проблема в том, что когда я отправляю форму, ответов нет в $scope.exercise. Я подозреваю, что это связано с тем, что эти поля добавляются после рендеринга исходного html.

Как это исправить?

Answer 1

Это не Угловой способ делать вещи. Вы хотите изменить структуру данных, привязанную к представлению. Создание массива ответов, а просто нажать на этот массив, когда вы хотите еще одну строку, чтобы показать:

И новая логика контроллера:

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

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

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