在 Ionic v1 中创建动态输入表单
Creating dynamic input form in Ionic v1
我在 Ionic v1 (Angular 1.x) 中有一个较旧的项目,用户可以在其中创建组和添加成员。我需要向应用程序添加一项功能,以便组管理员向组成员提问 - 一种动态形式。问题可以分为三种类型 - Yes/No(显示为切换)、字符串(输入文本)和带选项的问题(显示为 select 下拉列表)。问题的数量可能会有所不同。
问题按照下面的散列行存储。
{
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
我会建议一种比使用指令更简单的方法,除非您需要将其作为跨多个视图的组件重用。从 ng-repeat="(key, value) in questions"
开始,其中 questions
是对象的名称。然后根据value.type
对每个问题简单地show/hide不同的形式:ng-if="value.type=='String'"...
您在每种情况下显示的表单将是 yes/no
的复选框、string
的文本区域或输入(类型=文本)和 choice
.[=19 的单选按钮=]
我没有提供完整的代码,因为我假设您足够了解 Angular 来创建这些代码 - 如果不是每个案例都很容易 google。您还需要做的另一件事是在模型的每个问题(即用户的回答)上放置一个位置,可能是 value.answer
。例如:
<input type="checkbox" ng-model="value.answer">
这有意义吗?
我在 Ionic v1 (Angular 1.x) 中有一个较旧的项目,用户可以在其中创建组和添加成员。我需要向应用程序添加一项功能,以便组管理员向组成员提问 - 一种动态形式。问题可以分为三种类型 - Yes/No(显示为切换)、字符串(输入文本)和带选项的问题(显示为 select 下拉列表)。问题的数量可能会有所不同。
问题按照下面的散列行存储。
{
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
我会建议一种比使用指令更简单的方法,除非您需要将其作为跨多个视图的组件重用。从 ng-repeat="(key, value) in questions"
开始,其中 questions
是对象的名称。然后根据value.type
对每个问题简单地show/hide不同的形式:ng-if="value.type=='String'"...
您在每种情况下显示的表单将是 yes/no
的复选框、string
的文本区域或输入(类型=文本)和 choice
.[=19 的单选按钮=]
我没有提供完整的代码,因为我假设您足够了解 Angular 来创建这些代码 - 如果不是每个案例都很容易 google。您还需要做的另一件事是在模型的每个问题(即用户的回答)上放置一个位置,可能是 value.answer
。例如:
<input type="checkbox" ng-model="value.answer">
这有意义吗?