关于在an​​gularjs动态嵌套形式的模型数据绑定 [英] Binding data on a model for dynamic nested forms in angularjs

问题描述

我是从一个JSON对象产生嵌套形式说formObject和JSON对象本身绑定的值。我递归解析值，拉出实际的数据说，在dataObject时提交。

我可以在这样一个线性形式检索的dataObject。 http://jsfiddle.net/DrQ77/80/ 。

 ＆LT;选择NG模型=答案[question.Name]NG选项=在question.Options选项选项＆GT;
 

在与上述相反， http://jsfiddle.net/DrQ77/92/ 的有一些递归。我已经更名为问题到元素为它重新present这两个问题与放大器;部分。每个部分可以有多个问题和放大器;再次，多节（这就是我的意思被嵌套）。我想最终是与任何级别的嵌套以下形式的对象。

 答案= {[
    部分：个人，
    值：[{GenderQuestion：男}，{MaritalStatus：已婚}，{部分：子个人，值：[{LivingWith：当家}]}]
}，{
    部分：随机，
    值：[{ColorQuestion：红色}]，
}，
{SectionLess：OPT1}]
 

这是一个解决方案＆安培;我可以得到它从第一小提琴提交，$ scope.Answers不（我认为）让那种嵌套。但是，当我不得不更新现有的dataObject时，我觉得有必要渲染它，然后再上解析之前提交的数据对象到formObject映射。
现在这不是MVC，看起来不优雅（由于递归）及我觉得这有一个角的方式。

有没有人试过这种＆功放;心动不如行动以更好的方式工作？我如何围绕它得到什么？

解决方案

  VAR模型= {
    色彩：红，蓝，绿，黑，白]，
    性别：男，女]，
    主题：[性别，颜色，
    类别：【最爱，最不喜欢]，
};功能makeQuestion（专题，类别）{
    回报（类别+ 1 model.category【类别】+'？'：''）
    +''+ model.topic [专题] +'？'
}功能QuestionController（$范围）{    $ scope.Answers = {};
    $ scope.Questions = [
        {
            文本：makeQuestion（0）
            名称：GenderQuestion
            选项：model.genders
        }，{
            文本：makeQuestion（1,0），
            名称：ColorQuestion
            选项：model.colors.slice（0,3）
        }，{
            文本：makeQuestion（0,1），
            名称：SexistQuestion
            选项：model.genders
        }，{
            文本：makeQuestion（1,1），
            名称：RacistQuestion
            选项：model.colors.slice（3）
        }
    ];    $ scope.ShowAnswers =功能（）
    {
        的console.log（$ scope.Answers）;
    };
}
 

好吧，我是开玩笑。
但你使用的是扁平相关对象关系表的方法试过的嵌套呢？

  {
  部分：
    {名：个性化，问题：[0]，亚：[1]}，
    {名：亚人，问题：[3]，亚：[]}，
    {名：随机，问题：[1,2]，亚：[]}
  ]
  问题：
    {名：性别，文：性别？，选项：男，女]}，
    {名：颜色，文：最喜欢的颜色？，选项：红，蓝，绿]}，
    {姓名：LivingWith，文本：生活在？，选项：当家，有人]}，
    {名：随机，文：SectionLess，选项：OPT1，OPT2]}
  ]
}
 

I'm generating nested form from a json object say formObject and binding the values in the json object itself. I'm parsing the values recursively and pulling out the actual data say dataObject at submit.

I can retrieve the dataObject in a linear form like this one. http://jsfiddle.net/DrQ77/80/.

<select ng-model="Answers[question.Name]" ng-options="option for option in question.Options">

In contrast to the above, http://jsfiddle.net/DrQ77/92/ has some recursion. I've renamed question to element for it to represent both questions & sections. Every section can have multiple questions & again, multiple sections (this is what I meant by nesting). What I want eventually is an object in a form below with any level of nesting.

Answers=[{
    section:"Personal",
    values:[{GenderQuestion:"Male"},{MaritalStatus:"Married"},{section:"Sub Personal",values:[{LivingWith:"Alone"}]}]
}, {
    section:"Random",
    values:[{ColorQuestion:"Red"}],
},
{SectionLess:"opt1"}]

This is one solution & I can get it on submit, $scope.Answers from the first fiddle does not (I think) allow that kind of nesting. But when I have to update an existing dataObject, I felt a need to map the dataObjects onto the formObject before rendering it, and then parsing again on submit. Now this isn't MVC, doesn't look elegant (due to the recursion) & I think there's an 'angular way' for this.

Has anybody tried this & got it working in a better fashion? How do I get around it?

解决方案

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

Ok, i was kidding around. But have you tried using a flat related object relational table approach instead of nested?

{
  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"] }
  ]
}

这篇关于关于在an​​gularjs动态嵌套形式的模型数据绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！