AngularJS ng model with an array

Question

I am trying to let users choose add text field to a form and currently i have set up my controllers like this

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

It is adding input field as expected but changing answer field is not updating the model value. First of all, is it doable like this and if so what am I doing wrong.

stackoverflow.com/questions/14994391/…

noj
– noj

2015-01-12 22:19:23 +00:00
Commented Jan 12, 2015 at 22:19 — noj
– noj, Commented Jan 12, 2015 at 22:19
@jonnyynnoj that link is not very helpful.

Asif Alamgir
– Asif Alamgir

2015-01-12 22:35:33 +00:00
Commented Jan 12, 2015 at 22:35 — Asif Alamgir
– Asif Alamgir, Commented Jan 12, 2015 at 22:35

noj · Accepted Answer · 2015-01-12 22:57:31Z

You shouldn't be doing DOM manipulation at all here (especially not in your controller). Angular has ng-repeat to iterate over each item within an array/object. So you should set up your view to react to changes in the model:

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

Then in your controller you change the data that the view will represent:

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

Collectives™ on Stack Overflow

AngularJS ng model with an array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related