angular-autoFields-bootstrap
angular-autoFields-bootstrap copied to clipboard
how to multiple columns
I wonder this is possible with autoFields. I hope I make myself clear. THe blue line is the path for input when using TAB next field
This is an interesting problem. You might be able to do it with a Mutator as this is essentially another layout. Take a look at how bootstrap's Horizontal Layout was implemented. That should give you some ideas. If you're still at a loss, let me know what you've tried and I'll try to lend a hand.
I tried something with no succes. When trying to force the next column the endresult gets a extra closing div making it useless:
$autofieldsProvider.settings.columns = {
formColumns: 2,
currentColumn: 1,
};
var rowCount=0
function getRowCount() {
return rowCount++;
}
function resetRowCount() {
rowCount=0
}
$autofieldsProvider.registerMutator('columnsForm', function(directive, field, fieldElements){
var currentRow=getRowCount();
var htmlColumnGrid='<div class="col-sm-XX">'
htmlColumnGrid=htmlColumnGrid.replace('XX',12/directive.options.columns.formColumns)
if (currentRow===1) {
directive.container.prepend(htmlColumnGrid)
};
//force new column for demo
if (currentRow===4) {
directive.container.append('</div>'+htmlColumnGrid)
resetRowCount();
}
return fieldElements;
}, {require:'helpBlock'});