在angularjs中绑定动态嵌套表单的模型上的数据
我从json对象生成嵌套表单，比如formObject，并将值绑定到json对象本身。我递归地解析这些值并提取实际数据，比如在提交时使用dataObject。
我可以像这样以线性形式检索dataObject。http://jsfiddle.net/DrQ77/80/。
<select ng-model="Answers[question.Name]" ng-options="option for option in question.Options">与上面的不同，http://jsfiddle.net/DrQ77/92/有一些递归。我已经将question重命名为element，以表示问题和部分。每个部分可以有多个问题&同样，多个部分(这就是我所说的嵌套)。我最终想要的是一个具有任何级别嵌套的表单形式的对象。
Answers=[{
section:"Personal",
values:[{GenderQuestion:"Male"},{MaritalStatus:"Married"},{section:"Sub Personal",values:[{LivingWith:"Alone"}]}]
}, {
section:"Random",
values:[{ColorQuestion:"Red"}],
},
{SectionLess:"opt1"}]这是一种解决方案&我可以在提交时获取它，第一个fiddle中的$scope.Answers (我认为)不允许这种嵌套。但是，当我必须更新现有的dataObject时，我觉得需要在呈现它之前将dataObjects映射到formObject上，然后在提交时再次解析。这不是MVC，看起来并不优雅(由于递归)&我认为这是一种“角度的方式”。
有没有人尝试过这个方法，并让它以一种更好的方式工作？我该怎么绕过它呢？
回答 4
Stack Overflow用户
发布于 2014-02-04 18:37:59
不是很漂亮，但这是您已经提出的解决方案的替代方案。
http://jsfiddle.net/DrQ77/84/
function QuestionController($scope) {
$scope.answers = {};
$scope.tempOption = "";
$scope.questions = [
{
"text": "Gender?",
"name": "GenderQuestion",
"options": ["Male", "Female"]},
{
"text": "Favorite color?",
"name": "ColorQuestion",
"options": ["Red", "Blue", "Green"]}
];
$scope.showAnswers = function () {
console.log($scope.answers);
};
$scope.pumpOption = function (name, tempOption) {
$scope.answers[name] = tempOption;
};
};
<ul ng-repeat="question in questions">
<li>
<div>{{question.text}}</div>
<select ng-model="tempOption" ng-options="opt for opt in question.options" ng-change="pumpOption(question.name, tempOption)">
</select>
</li>
</ul> 我们将select标记中选定选项的值绑定到一个$scope.tempOption变量。
然后，我们侦听在此select标记上发生的ng-change事件，其中我们运行一个函数，该函数接受$scope.tempOption变量加上与select标记相关联的{{question.name}}。
然后，此函数将answersname设置为$scope.tempOption的当前值。
希望这对你有用，祝你好运:)
Stack Overflow用户
发布于 2014-02-14 11:35:21
var model = {
colors:["Red","Blue","Green","Black","White"],
genders:["Male", "Female"],
topic:["Gender", "Color"],
category:["Favorite", "Least favorite"],
};
function makeQuestion(topic, category){
return (category+1 ? model.category[category] + ' ' : '')
+ ' ' + model.topic[topic] + '?'
}
function QuestionController($scope){
$scope.Answers = {};
$scope.Questions = [
{
"Text": makeQuestion(0),
"Name": "GenderQuestion",
"Options": model.genders
},{
"Text": makeQuestion(1,0),
"Name": "ColorQuestion",
"Options": model.colors.slice(0,3)
},{
"Text": makeQuestion(0,1),
"Name": "SexistQuestion",
"Options": model.genders
},{
"Text": makeQuestion(1,1),
"Name": "RacistQuestion",
"Options":model.colors.slice(3)
}
];
$scope.ShowAnswers = function()
{
console.log($scope.Answers);
};
} 好吧，我是开玩笑的。但是，您是否尝试过使用平面相关对象关系表方法而不是嵌套方法？
{
sections:[
{ "Name": 'Personal', "questions":[0], sub:[1] },
{ "Name": 'SubPersonal', "questions":[3], sub:[]},
{ "Name": 'Random', "questions":[1,2], sub:[] }
],
questions:[
{ "Name":"Gender", "Text":"Gender?", "Options":["Male", "Female"] },
{ "Name":"Color", "Text":"Favorite Color?", "Options":["Red","Blue","Green"] },
{ "Name":"LivingWith", "Text":"Living With?", "Options":["Alone","Someone"] },
{ "Name":"Random", "Text":"SectionLess", "Options":["opt1", "opt2"] }
]
}Stack Overflow用户
发布于 2014-02-10 21:52:17
只需创建模型并将ng- $scope.Answer = {};链接到它。http://jsfiddle.net/2AwLM/40/
https://stackoverflow.com/questions/21548983
复制相似问题
腾讯云开发者
