javascript - Angular.js 动态表单输入类型

Question

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

首先，我有一个 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 , checkbox和 radio领域。但是如果类型是file , 它将输入类型设置为 text .

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

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

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

Answer 1

话题如果改变type属性(property)如果<input>元素是热门话题。

实际上，由于 AngularJS 的行为依赖于添加了 jQuery(在 angular.js 之前或之后)。

在这里您可以阅读一些关于更改可能性的讨论 type : change type of input field with jQuery

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

如果您发现建议的解决方案不够好(尽管在呈现表单后类型没有改变)，您可以使用 ng-switch方式 - 只为用户显示正确的输入。