Bug
Hi everybody
I am using angular-schema-form with angular-schema-form-bootstrap, and I am managing my form through the tab array template provided in this package.
When using ng-animate in the Angular.JS project, an insidious problem occurs with the tabarray: the form fields within the tab are not displayed until the "add" button is clicked.
Expected behaviour
I expect them to be shown.
Actual behaviour
The form fields within the tab are not displayed until the "add" button is clicked.
Gist/Plunker/Demo
Link to the plunkr
Related issues
This is related to (angular/angular.js#10811)
Other info
As you can see editing the Plunker, the problem can be solved importing the bootstrap decorator inside "angular-schema-form". The one in this repo is bugged.
One can also disable ng-animate.
How to solve the problem
The problem as described in the Angular issue provided above, exists when one uses ng-animate and specifies more than one interpolated value in the "class" attribute of an element, in conjuction of ng-class.
In this particular situation ng-class is never evaluated.
This is the case of:
/0.2.0/src/tabarray.html
where we have
<div class="tab-pane clearfix tab{{selected.tab}} index{{$index}}"
sf-field-model="ng-repeat"
ng-repeat="item in $$value$$ track by $index"
ng-show="selected.tab === $index"
ng-class="{active: selected.tab === $index}">
Here there are two interpolated variables inside "class" (selected.tab and $index), and ng-class is never evaluated.
So the tab-pane doesn't get the active class, that gives to it display:block over the default "display:none".
I suggest you to remove the tab{{selected.tab}} in order to solve the problem.
I'll send a pull request to do it.
After doing that everything will work fine (I have already tested it locally).
Best regards,
Patrizio Tufarolo
@json-schema-form/angular-schema-form-bootstrap-lead
Bug
Hi everybody
I am using angular-schema-form with angular-schema-form-bootstrap, and I am managing my form through the tab array template provided in this package.
When using ng-animate in the Angular.JS project, an insidious problem occurs with the tabarray: the form fields within the tab are not displayed until the "add" button is clicked.
Expected behaviour
I expect them to be shown.
Actual behaviour
The form fields within the tab are not displayed until the "add" button is clicked.
Gist/Plunker/Demo
Link to the plunkr
Related issues
This is related to (angular/angular.js#10811)
Other info
As you can see editing the Plunker, the problem can be solved importing the bootstrap decorator inside "angular-schema-form". The one in this repo is bugged.
One can also disable ng-animate.
How to solve the problem
The problem as described in the Angular issue provided above, exists when one uses ng-animate and specifies more than one interpolated value in the "class" attribute of an element, in conjuction of ng-class.
In this particular situation ng-class is never evaluated.
This is the case of:
/0.2.0/src/tabarray.htmlwhere we have
Here there are two interpolated variables inside "class" (
selected.taband$index), andng-classis never evaluated.So the tab-pane doesn't get the active class, that gives to it
display:blockover the default "display:none".I suggest you to remove the
tab{{selected.tab}}in order to solve the problem.I'll send a pull request to do it.
After doing that everything will work fine (I have already tested it locally).
Best regards,
Patrizio Tufarolo
@json-schema-form/angular-schema-form-bootstrap-lead