javascript - Angular.js Dynamic Form input types -

javascript - Angular.js Dynamic Form input types -

i'm trying create angular.js app creates dynamic form inputs json object.

so firstly, have 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 input type form. see below:

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

now works fine submit, text, password, checkbox , radio fields. if type file, sets input type text.

if replace {{field.name}} {{field.type}} text, can confirm outputting file.

if statically alter <input type="{{field.type}}"... <input type="file"... display file input correctly.

why won't allow me set input type file dynamically?

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

actually, angularjs behaviour depends on jquery added (before or after angular.js).

here can read give-and-take possibility alter type: jquery alter type of input field

also there pull request angularui adding new directive back upwards of dynamic type change: https://github.com/angular-ui/angular-ui/pull/371

if find suggested solution not plenty (though type not changed after render form) can go ng-switch way - show corrent input user.

javascript angularjs