AngularJS: geração dinâmica de formas

Preciso de uma forma de gerar formulários dinâmicos baseados numa estrutura de documentos para actualizar os valores existentes dos seus atributos ou adicionar valores aos atributos que são multivaluados.

{[[2]} eu tenho um controlador em angular que recebe um nome de classe de documento e id e puxa um documento específico dessa classe.

O controlador lê o documento e grava dados como número de atributos, tipo de atributo, se o atributo for multivalued ou não e os valores.

cada classe é diferente em número de atributos, tipos de atributos.

Aqui está um exemplo dos dados gerados pelo meu controlador para um documento específico de uma classe específica:

 CLASS/id {cid: "Disease/54d49a8c3b70f6cce63dc475"}
 N° ATTRIBUTES:3(without counting multivalues of the same attribute)


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:displayName
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:text
 MULTI VALUE ATTRIBUTE:0(not multivalue field)
 ATTRIBUTE N° OF VALUES:1(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITION:0 ---> value displayName #1


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:identifier
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:text
 MULTI VALUE ATTRIBUTE:1(multivalue field)
 ATTRIBUTE N° OF VALUES:1(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITION:0 ---> value identifier #1


 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE NAME:r
 /////////////////////////////////////////////////////////////////////////////////////////////
 ATTRIBUTE DATA TYPE:date
 MULTI VALUE ATTRIBUTE:1(multivalue field)
 ATTRIBUTE N° OF VALUES:3(existing n° of values at the moment)
 ATRIBUTE ARRAY POSITIONS:0 ---> value r #1
 ATRIBUTE ARRAY POSITIONS:1 ---> value r #2
 ATRIBUTE ARRAY POSITIONS:2 ---> value r #3

dependendo da classe processada e documentar estas alterações de valor.

tudo isso funciona bem, mas eu sou novo para angular e não sei como renderizar as coisas no lado da vista com base nos dados gerados anteriormente.

baseado no exemplo de dados mostrado acima eu gostaria que o formulário gerado fosse algo tipo:

enter image description here

Alguém me pode ajudar a mostrar-me a abordagem certa para isto?

Author: John Slegers, 2015-04-23

1 answers

1) converter os dados do documento para uma lista de objectos JSON, sendo cada objecto um campo:

fields = [
{"name": "displayName", dataType: "text", isMultiValue: false, numberOfValues: 1},
...
]
Esta é provavelmente a parte mais complicada.

2) algures no controlador:

$scope.documentData = {};
$scope.getFieldTemplateUrl = function(field) {
    return '/url/to/field/templates/' + field.dataType + '.html';
};

3)

<div ng-repeat="field in fields">
    <div ng-include="getFieldTemplateUrl(field)"></div>
</div>

4) Defina esses modelos de campo para cada dataType. Para" texto " é muito simples:

<label for="{{field.name}}">{{field.name}}</label>
<input id="{{field.name}}" type="text" ng-model="documentData[field.name]" />

Com base nisto, terá de adicionar suporte para isMultiValue e provavelmente preencher documentData com os dados existentes.

Também há muitas bibliotecas a fazer exactamente isto.
 7
Author: Sergiu Paraschiv, 2015-04-23 11:49:18