Angular.js动态表单输入类型 [英] Angular.js Dynamic Form input types

问题描述

我试图让从一个JSON对象创建动态表单输入的Angular.js应用程序。

I'm trying to make an Angular.js app that creates dynamic form inputs from a JSON object.

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

So firstly, I have a JSON object (called fields):

[
  {"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"}
]

对象键键入是一个表单的输入类型。见下图：

The object key type is the input type for a form. See below:

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

现在这个工程完全罚款提交，文本，密码，复选框和无线字段。但是，如果类型是文件，它设置输入类型为文本。

Now this works completely fine for submit, text, password, checkbox and radio fields. But if the type is file, it sets the input type to text.

如果我更换 {{} field.name} 与 {{} field.type} 文本，我可以证实它正在输出文件。

If I replace {{field.name}} with {{field.type}} for the text, I can confirm it is outputting file.

如果我改变静态＆LT;输入类型={{field.type}}... 到＆LT;输入类型=文件... 它会正确显示文件输入。

If I statically change <input type="{{field.type}}"... to <input type="file"... it will display a file input correctly.

为什么不会它让我设置的输入类型为文件动态？

Why won't it let me set an input type as a file dynamically?

推荐答案

主题，如果改变键入财产，如果＆LT;输入＆GT; 元素是热议的话题。

Topic if changing type property if <input> element is hot topic.

其实，AngularJS行为取决于被添加的jQuery（之前或之后angular.js）。

Actually, as AngularJS behaviour depends on was jQuery added (before or after angular.js).

在这里，您可以阅读有关可能进行一些讨论修改键入：
JQuery的变化类型输入字段的

Here you can read some discussion about possibility to change type: JQuery change type of input field

也有拉请求AngularUI添加新指令的支持动态类型的变化：的 https://github.com/angular-ui/angular-ui/pull/371

Also there is pull request to AngularUI for adding new directive with support of dynamic type change: https://github.com/angular-ui/angular-ui/pull/371

如果您发现建议的解决方案不够好（虽然类型不改变您呈现形式后），您可以用去纳克开关办法 - 就显示corrent输入对用户开放。

If you find suggested solution is not good enough (though as type is not changed after you render form) you can go with ng-switch way - just show corrent input for user.

这篇关于Angular.js动态表单输入类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！