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元素是热门话题，则更改<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方式 - 只显示用户的相关输入。

Angular.js动态表单输入类型

1 个答案: