3

我正在尝试制作一个从 JSON 对象创建动态表单输入的 Angular.js 应用程序。

所以首先，我有一个 JSON 对象（称为字段）：

[
  {"field_id":209,"form_id":1,"name":"firstname","label":"First Name","type":"text"},
  {"field_id":210,"form_id":1,"name":"lastname","label":"Last Name","type":"text"},
  {"field_id":211,"form_id":1,"name":"email","label":"Email","type":"text"},
  {"field_id":212,"form_id":1,"name":"picture","label":"Picture","type":"file"},
  {"field_id":213,"form_id":1,"name":"address","label":"Address","type":"file"},
  {"field_id":214,"form_id":1,"name":"password","label":"Password","type":"password"},
  {"field_id":215,"form_id":1,"name":"","label":"","type":"submit"}
]

对象键type是表单的输入类型。见下文：

<p ng-repeat="field in fields">
  {{field.name}} : <input type="{{field.type}}" value="{{record.data[field.name]}}" />
</p>

现在这对submit, text,password和字段完全适用。但如果类型是，它会将输入类型设置为。checkboxradiofiletext

如果我替换{{field.name}}为{{field.type}}文本，我可以确认它正在输出file。

如果我静态更改<input type="{{field.type}}"... 为<input type="file"...它将正确显示文件输入。

为什么它不允许我将输入类型动态设置为文件？

4

1 回答 1

2

如果元素是热门话题，则更改type属性时的话题。<input>

实际上，由于 AngularJS 的行为取决于是否添加了 jQuery（在 angular.js 之前或之后）。

在这里您可以阅读一些关于更改可能性的讨论type： 使用 jQuery 更改输入字段的类型

还有对 AngularUI 的拉取请求，用于添加支持动态类型更改的新指令：https ://github.com/angular-ui/angular-ui/pull/371

如果您发现建议的解决方案不够好（尽管在您呈现表单后类型没有更改），您可以ng-switch随心所欲 - 只需为用户显示正确的输入。

于 2013-02-19T10:13:14.827 回答