Question

我在Ionic v1（Angular 1.x）中有一个较旧的项目，用户可以在其中创建组并添加成员。我需要为应用程序添加一个功能，以便组管理员向组成员提出问题 - 这是一种动态表单。问题可以有三种类型 - 是/否（显示为切换），字符串（输入文本）和带选择的问题（显示为选择下拉列表）。问题的数量可能会有所不同。

问题存储在下面的哈希行中。

{
        id1: {q: "question1", type: "String"},
        id2: {q: "question2", type: "Yes/No"}
        id3: {q: "question3", type: "Choice", choices: "Choice1, Choice2, Choice3"},
        id4: {q: "question4", type: "String"},
        id5: {q: "question5", type: "Yes/No"}
        id6: {q: "question6", type: "Choice", choices: "Choice4, Choice5, Choice6"}
}

我试图想出能够向用户动态显示这些问题并收集答案的最佳方法，但不太确定最佳方法是什么。我开始考虑尝试创建一个指令，但希望在花费太多时间之前得到建议。

期待您的想法和建议。

-S

Answer 1

我建议使用比使用指令更简单的方法，除非您需要将其作为跨多个视图的组件重用。首先让ng-repeat="(key, value) in questions" questions是您对象的名称。然后，只需根据value.type显示/隐藏每个问题的不同表单：ng-if="value.type=='String'"...

您在每种情况下显示的表单都是yes/no，textarea或string的输入（type = text）和choice的单选按钮的复选框。

我没有提供完整的代码，因为我认为你知道足够的Angular能够创建那些 - 如果不是每个案例都是一个简单的谷歌。您需要的另一件事是模型的每个问题上的位置（即用户的答案），可能是value.answer。例如：

<input type="checkbox" ng-model="value.answer">

这有意义吗？

在Ionic v1中创建动态输入表单

1 个答案: