我想根据条件 displayInSecondColumn == true 在页面上以2列形式显示输入类型,如果 displayInSecondColumn == true 然后显示该字段在第二列中,否则使用引导框架在第一列中显示。我已根据其条件以2列的形式成功渲染了这些字段,但是这些字段未正确对齐。
下面是HTML代码段:
<div ng-show="supportModel.srData.SRColumnLayoutForSS3 == 2" ng-repeat="header in supportModel.srData.headers | orderObjectBy: 'Order'">
<div class="row" ng-repeat="question in header | orderObjectBy: 'Order'" ng-show="question.headerId != 'tempRootHeaderId' && question.Type == 'header section'">
<div class="srd-question" data-id="{{question.id}}" data-answer="{{question.Value}}" ng-switch="question.Type" data-visibility="{{question.isVisible}}">
<ng-form name="subFormInputs">
<srd-header-section ng-switch-when="header section" data="question"></srd-header-section>
</ng-form>
</div>
</div>
<div class="row">
<div class="col-md-6 modalLayoutWidth">
<div ng-repeat="question in header | orderObjectBy: 'Order'" data-id="{{question.id}}" data-answer="{{question.Value}}" data-visibility="{{question.isVisible}}" ng-switch="question.Type" ng-if="!question.DisplayInSecondColumn && question.Type != 'header section'">
<div ng-include="supportModel.srData.resourceUrl+'views/support/SRInputFields.html'"></div>
</div>
</div>
<div class="col-md-6 modalLayoutWidth floatLeftRtl" style="float: right;">
<div ng-repeat="question in header | orderObjectBy: 'Order'" data-id="{{question.id}}" data-answer="{{question.Value}}" data-visibility="{{question.isVisible}}" ng-switch="question.Type" ng-if="question.DisplayInSecondColumn && question.Type != 'header section'">
<div ng-include="supportModel.srData.resourceUrl+'views/support/SRInputFields.html'"></div>
</div>
</div>
</div>
下面是SRInputFields.html文件
<ng-form name="subFormInputs" >
<div ng-switch="question.Type" ng-if="question.IsHidden == false">
<srd-text-question ng-switch-when="textfield" data="question"></srd-text-question>
<srd-text-question ng-switch-when="textarea" data="question"></srd-text-question>
<srd-radio-question ng-switch-when="radiobutton" data="question"></srd-radio-question>
<srd-checkbox-question ng-switch-when="checkbox" data="question"></srd-checkbox-question>
<srd-number-question ng-switch-when="number" data="question"></srd-number-question>
<srd-menu-question ng-switch-when="picklist" data="question"></srd-menu-question>
<srd-date-time-question ng-switch-when="date/time" data="question"></srd-date-time-question>
<srd-date-question ng-switch-when="date" data="question"></srd-date-question>
<srd-reference-question-tree ng-switch-when="lookup" data="question" for-sr="true" ng-if="question.isCategory"></srd-reference-question-tree>
<srd-reference-question ng-switch-when="lookup" data="question" ng-if="!(question.isCategory)"></srd-reference-question>
<srd-header-section ng-switch-when="header section" ng-if="supportModel.srData.SRColumnLayoutForSS3 != 2" data="question"></srd-header-section>
<srd-text-question ng-switch-when="richtextarea" data="question"></srd-text-question>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && (subFormInputs.formField.$error.required || subFormInputs.radioButtonForm.formField.$error.required)">{{selfServiceLabels.EnterValue}}</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.MinSel">{{selfServiceLabels.InvalidSelection}}({{selfServiceLabels.MinimumSelections}} {{question.Validations.MinValue}})</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.email">{{selfServiceLabels.InvalidEmail}}</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && ( formSubmitted && (subFormInputs.formField.$error.positiveValue || subFormInputs.formField.$error.number || subFormInputs.formField.$error.badInput))">{{selfServiceLabels.InvalidNumber}}</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.url">{{selfServiceLabels.InvalidURL}}</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.min">{{selfServiceLabels.range}}({{selfServiceLabels.MinimumValue}} {{question.Validations.MinValueLocalized}})</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.max">{{selfServiceLabels.range}}({{selfServiceLabels.MaximumValue}} {{question.Validations.MaxValueLocalized}})</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.minmax">{{selfServiceLabels.range}} ({{selfServiceLabels.ExpectedRange}}{{question.Validations.MinValueLocalized}}-{{question.Validations.MaxValueLocalized}})</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && subFormInputs.formField.$error.minlength && !question.Validations.MaxValue">{{selfServiceLabels.InvalidLength}} ({{selfServiceLabels.MinimumLength}} {{question.Validations.MinValue}})</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date' && subFormInputs.formField.$error.ValidDate">{{selfServiceLabels.InvalidDate}}</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date/time' && subFormInputs.formField.$error.ValidDate">{{selfServiceLabels.InvalidDate}}</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date' && subFormInputs.formField.$error.smaller">{{selfServiceLabels.Expected}}{{question.Text}} < {{question.errorMsg}}</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date' && subFormInputs.formField.$error.greater">{{selfServiceLabels.Expected}}{{question.Text}} > {{question.errorMsg}}</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date/time' && subFormInputs.formField.$error.smaller">{{selfServiceLabels.Expected}}{{question.Text}} < {{question.errorMsg}}</span>
<span class="srd-question-error_message" ng-show="!supportModel.isDraft && formSubmitted && question.Type=='date/time' && subFormInputs.formField.$error.greater">{{selfServiceLabels.Expected}}{{question.Text}} > {{question.errorMsg}}</span>
</div>
</ng-form>
任何帮助将不胜感激。
谢谢!