我试图让用户选择将文本字段添加到表单中,目前我已经像这样设置了我的控制器
$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();
它按预期添加输入字段,但更改答案字段并没有更新模型值。首先,这样可行吗?如果可以的话,我做错了什么。
你根本不应该在这里进行 DOM 操作(尤其是在你的控制器中)。 Angular 有 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();
});