Angular 1 选择未正确渲染答案

【问题标题】：Angular 1 Select not Rendering ProperlyAngular 1 选择未正确渲染
【发布时间】：2017-07-24 21:52:13
【问题描述】：

我正在使用 Python、Django 和 Angular 1 编写应用程序，并且在呈现页面时遇到了最奇怪的问题。

这里是 HTML 片段。有 4 组图例/输入或图例/选择，选择在最后。

<!-- 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 如下所示：

现在，当我将带有 select 的 div 向上移动 1 时，它是页面中的第三个而不是第四个项目，它变得一团糟。以下是来自开发者工具的新页面和呈现的 HTML：

如您所见，选择字段不再对齐，缺少第三个 div 的结束标记，以及第四个 div 的开始 div 和 span。无论我将 div 与 select 放在列表中的哪个位置，都会发生这种情况。原来的 HTML sn-p 没问题，但是 Angular 渲染出来的 HTML 都乱七八糟了。

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

【问题讨论】：

您介意发布真实代码而不是屏幕截图吗？一些可运行的代码也会很好（SO 有一个非常简洁的功能）。您可以从代码中删除所有 AngularJS 内容，因为它似乎与您的 CSS/布局问题没有任何关系。
对不起，我对这个开源的东西有点陌生。 html是真实的，css是真实的，angular渲染的html是截图，因为无法复制，所以只能截图。我不知道为什么我因此而被否决。不知道 SO 是什么。 Angular 以及它如何呈现页面不是问题吗？将其剥离会有什么帮助？如果它取决于我的数据库，我如何提供可运行的代码？我想对您有所帮助，请多多指教。
您的问题似乎只与 HTML 和 CSS 有关，因此为了找到问题，通常会从生成的代码中创建一个小示例。您提供的屏幕截图基本上是这样的 sn-ps - 完美的调试大小。您可以使用浏览器的开发工具轻松复制生成的 AngularJS 代码（阅读并学习使用它——这是必不可少的）。哦，SO 表示 StackOverflow，即您当前所在的网站。
谢谢，你是对的，我取出了 Angular 的东西，只有一个空的 Select 标签，问题仍然存在。我会研究如何给出一些可运行的代码。

标签： html css angularjs

【解决方案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 的建议。

【讨论】：