我正在使用 Python、Django 和 Angular 1 编写应用程序,但在呈现页面时遇到了最奇怪的问题。
这是 HTML 片段。 legend/input 或 legend/select 共有 4 组,select 在最后。
<!-- tab 1 contents -->
<div ng-show="tab_1_active" style="height:90%;width:100%;overflow:auto;overflow-x:hidden;">
<div id="tab_1_left" style="height:100%; width:33%">
<div class="newRow" style="margin-top:10px;">
<span class="input-header" style="width:100px;">Start Date:</span>
<input type="text" ng-model="activeProfile.startdate">
</div>
<div class="newRow" style="margin-top:10px;">
<span class="input-header" style="width:100px;">LDA:</span>
<input type="text" ng-model="activeProfile.enddate">
</div>
<div class="newRow" style="margin-top:10px;">
<span class="input-header" style="width:100px;">AY:</span>
<input type="text" ng-model="activeProfile.awardyear">
</div>
<div class="newRow" style="margin-top:10px;">
<span class="input-header" style="width:100px;">AY:</span>
<select ng-model="activeProfile.awardyear" ng-options="ay.display for ay in awardYears"/>
</div>
</div>
</div>
这是相关的 CSS:
input {
height:35px;
margin-top:5px;
}
.newRow {
width:auto;
float:left;
clear:both;
}
select {font-size:14px; padding:6px; background:none; border:3px solid #727272;
height:35px;
background:url(../images/arrow_down.png) 98% .4em no-repeat;
-webkit-appearance: none;appearance: none;-moz-appearance: none;
border-radius:0;-moz-border-radius:0; -webkit-border-radius:0;
overflow:hidden;
padding-right:50px;
}
当页面按原样呈现时,一切看起来都很好。开发者工具中的页面和呈现的 html 如下所示:
现在,当我将其中包含选择的 div 向上移动 1 使其成为页面中的第三个而不是第四个元素时,它会变得一团糟。以下是开发人员工具生成的新页面和呈现的 HTML:
如您所见,选择字段不再对齐,第三个 div 的结束标记丢失,第四个 div 的开始 div 和 span 也丢失。无论我将 div 与选择放在列表中的哪个位置,都会发生这种情况。原始的 HTML 片段很好,但 Angular 渲染的 HTML 却一团糟。
由于我需要在表单上添加其他输入字段,以及其他选择字段,所以我确实需要解决这个问题。任何人都可以看到为什么选择字段弄乱了它下面的字段吗?谢谢...
最佳答案
想通了。 这:
<select ng-model="activeProfile.awardyear" ng-options="ay.display for ay in awardYears"/>
应该是:
<select ng-model="activeProfile.awardyear" ng-options="ay.display for ay in awardYears"></select>
我更习惯于使用 XML,这不会有什么不同。感谢@HubertGrzeskowiak 的建议。
关于html - Angular 1 选择不正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45271934/