Ripetitori, interruttori e sezioni, oh mio
-
21-12-2019 - |
Domanda
Sto cercando di creare un designer / costruttore di formazione con Webpi e Angularjs.Sto passando un numero di campi forniti un ID modulo.Una delle coppie di valori chiave che viene passata è in quale sezione dovrebbe essere il campo. Le sezioni sono essenzialmente un div.well che con H5 {Section} come intestazione della sezione.Il problema che voglio avere 2-3 sezioni contenenti diversi campi ma non riesco a capire il modo giusto, costruire il mio parziale. qui è un link a un jsfiddle che stavo lavorando su
<link href="//netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="myApp">
<div ng-controller="FormCtrl">
<div class="well" style='overflow: hidden'>
<div ng-repeat="formfield in form.FormsFields | filter:q">
<div ng-switch on="formfield.Field.fieldType">
<div ng-switch-when="Txt" class="span{{formfield.spanSize}}" style="margin-left: 5px; ">
<label for="" class="label label-info">{{formfield.Field.label}}</label>
<input type="text" class="input-block-level" section="{{formfield.section}}" name="" id="test">
</div>
<div ng-switch-when="Are" style="margin-left: 5px; ">
<br>
<div>
<label for="" class="label label-info">{{formfield.Field.label}}</label>
<textarea class="input-block-level" name="" section="{{formfield.section}}" id="test"></textarea>
</div>
</div>
<h1 ng-switch-default>Error</h1>
</div>
</div>
</div>
</div>
.
Soluzione
Puoi usare qualcosa come Underscore per prima gruppo i campi nelle sezioni e quindi mapparli in qualcosa di facilmente collegabile nelUI.
$scope.sections = groupBySection(data);
function groupBySection(data) {
var grouped = _.groupBy(data.FormsFields, 'section');
return _.map(grouped, function(val, key){
return { name: key, fields: val };
});
};
.
E naturalmente un jsfiddle che mostra tutto funziona .