在AngularJS中向嵌套项添加和删除数组

时间:2016-12-19 09:23:30

标签: javascript angularjs nested-loops nested-forms dynamic-forms

我想在AngualrJS中创建一个表单生成器,能够添加和删除无限制的子问题,以选择父问题,如下所示:

Question 1
  ---Choice1.1
  ---Choice1.2
     ---Child-Question 1.1
       ---Choice1
       ---Choice2
          ---Child-Question 1.1.2
            ---Choice1
            ---Choice2
       ---Choice3
  ---Choice1.3
Question 2
  ---Choice2.1
  ---Choice2.2
  ---Choice2.3

这是我想要动态创建的示例JSON:

{
title: "string",
description: "string",
questionType: 0,
option: {
    min: 0,
    max: 0,
    step: 0,
    unit: "string"
},
choices: [
    {
        title: "string",
        order: 0,
        matrixPosition: 0,
        childQuestionTemplate: {}
    },
    {
        title: "string",
        order: 0,
        matrixPosition: 0,
        childQuestionTemplate: {
            title: "string",
            description: "string",
            questionType: 0,
            option: {},
            choices: [
                {
                    title: "string",
                    order: 0,
                    matrixPosition: 0,
                    childQuestionTemplate: {}
                }
            ]
        }
    },
    {
        title: "string",
        order: 0,
        matrixPosition: 0,
        childQuestionTemplate: {
            id: 0,
            title: "string",
            description: "string",
            questionType: 0,
            option: {
                min: 0,
                max: 0,
                step: 0,
                unit: "string"
            },
            choices: [
                {
                    title: "string",
                    order: 0,
                    matrixPosition: 0,
                    childQuestionTemplate: {
                        title: "string",
                        description: "string",
                        questionType: 0,
                        option: {},
                        choices: [
                            {
                                title: "string",
                                order: 0,
                                matrixPosition: 0,
                                childQuestionTemplate: {}
                            }
                        ]
                    }
                }
            ]
        }
    },
    {
        title: "string",
        order: 0,
        matrixPosition: 0,
        childQuestionTemplate: {}
    }
]
}

现在我想知道如何从我的HTML中选择(获取路径)选项以将子问题推送到其他子问题的选择中?

1 个答案:

答案 0 :(得分:1)

如果你想从html中获取选择的路径,你可以通过为你的问题提供索引(唯一ID)来做到这一点,我建议你改变选择"从数组到对象,以便您可以使用指定的唯一ID直接访问它。

示例是:

var jsonObject = {
    "1-1" : {
        title: "primary index",
        description: "string",
        questionType: 0,
        option: {
            min: 0,
            max: 0,
            step: 0,
            unit: "string"
        },
        choices: {
            "2-1" : {
                title: "secondary index",
                order: 0,
                matrixPosition: 0,
                childQuestionTemplate: {}
            },
            "2-2" : {
                title: "string",
                order: 0,
                matrixPosition: 0,
                childQuestionTemplate: {
                    title: "string",
                    description: "string",
                    questionType: 0,
                    option: {},
                    choices: {
                       "3-1" : {
                            title: "tertiary index 1",
                            order: 0,
                            matrixPosition: 0,
                            childQuestionTemplate: {}
                        },
                        "3-2" : {
                            title: "tertiary index 2",
                            order: 0,
                            matrixPosition: 0,
                            childQuestionTemplate: {}
                        }
                    }
                }
            }
        }
    }
}

因此,如果你想删除一个选择,你可以这样做

var primaryIndex = "1-1";

//remove on the tertiary index
var secondaryIndex = "2-2";
var tertiaryIndexToDelete = "3-1";
delete jsonObject[primaryIndex].choices[secondaryIndex].childQuestionTemplate.choices[tertiaryIndexToDelete]; 

//remove on the secondary index
var secondaryIndexToDelete = "2-2";
delete jsonObject[primaryIndex].choices[secondaryIndexToDelete]; 

现在,如果您想为问题添加选项,可以执行此操作

var newChoice = {
    title: "new choice",
    order: 0,
    matrixPosition: 0,
    childQuestionTemplate: {}
}
var indexOfNewChoice = "2-3";
jsonObject["1-1"].choices[indexOfNewChoice] = newChoice;

我希望这会有所帮助。