Question

我想用angular编写一个表单生成器应用程序。该应用程序将允许用户使用拖放元素构建简单的HTML表单。

我认为将元素模板存储为单独的html文件或仅作为字符串会很好。

例如，如果我有以下数据：

$scope.formFields = [
   {type: "fTextbox", name: "textbox1", label: "First name"},
   {type: "fDropdown", name: "dropdown1", label: "Country"},
   {type: "fCheckbox", name: "terms1", label: "TermsAndConditions"},
   ...
];

我还可以在某处存放一个字典来存储模板并将它们映射到表单元素。

{
    fTextbox: "/templates/elements/textbox.html",
    fDropdown: "/templates/elements/dropdown.html",
    fCheckbox: "/templates/elements/checkbox.html",
    ...
}

我如何循环浏览并将正确的模板附加到视图？

[编辑] 我只需要角度来看这些任务的一般方法。到目前为止，我只遇到了模板的ng-switch，但这不是一个理想的解决方案，因为可能有很多类型的表单元素，模板会变得非常混乱。

Answer 1

使用ng-include根据名称动态注入模板，例如

<div ng-include='template.fTextbox'/> <div ng-include='template.fCheckbox'/>

您也可以编写指令，但仍然需要将它们包装到ng-include中。请参阅我的回答AngularJS - how to have a directive with a dynamic sub-directive

在angularjs中的控制器内的循环中渲染和注入动态模板

1 个答案: