Угловая модель нг с массивом

Question

Я пытаюсь, чтобы позволить пользователям выбрать добавить текстовое поле в форму и в настоящее время я создал свои контроллеры, как этот

$scope.campaign = {name:"", question:"",answers:[]}; 
var totalAnswers = 2; 
var totalAnswerAdded = 0; 
var utils = { 
    initAnswerFields : function(){ 
     var answers = angular.element("#answer-fields"); 
     var input; 
     console.log("ADDING"); 
     while(totalAnswerAdded < totalAnswers){ 
      $scope.campaign.answers.push({answer:""}); 
      input = angular.element("<input type='text' data-name='answer-"+totalAnswerAdded+"' data-ng-model='campaign.answers["+totalAnswerAdded+"].answer' />"); 
      answers.append(input); 
      totalAnswerAdded++; 
     } 


    }, 
    addAnswerFields : function(){ 

    } 
}; 
var init = function(){ 
    utils.initAnswerFields(); 
    utils.addAnswerFields(); 
}; 
init(); 

Это добавление поля ввода, как ожидаются, но изменяющееся поле ответа не обновляет значение модели. Прежде всего, можно ли это сделать так, и если да, то что я делаю неправильно.

Answer 1

Вы не должны делать манипуляции с DOM здесь (особенно не в вашем контроллере). Угловое имеет ng-repeat, чтобы перебирать каждый элемент в массиве/объекте. Таким образом, вы должны настроить ваш взгляд реагировать на изменения в модели:

<div ng-controller="ctrl"> 
    <div ng-repeat="answer in campaign.answers"> 
     <input type="text" data-ng-model="answer.value"> 
    </div> 
</div> 

Затем в контроллере изменить данные о том, что представление будет представлять:

app.controller('ctrl', function ($scope) { 
    var totalAnswers = 2; 
    var totalAnswerAdded = 0; 

    $scope.campaign = {name:"", question:"",answers:[]}; 

    var utils = { 
     initAnswerFields: function() { 
      while(totalAnswerAdded < totalAnswers) { 
       $scope.campaign.answers.push({value: ''}); 
       totalAnswerAdded++; 
      } 
     } 
    }; 

    var init = function() { 
     utils.initAnswerFields(); 
     utils.addAnswerFields(); 
    }; 

    init(); 
});