html - Angular 1 选择不正确呈现

Question

我正在使用 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 却一团糟。

由于我需要在表单上添加其他输入字段，以及其他选择字段，所以我确实需要解决这个问题。任何人都可以看到为什么选择字段弄乱了它下面的字段吗？谢谢...

Answer 1

想通了。这:

<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 的建议。