Question

我正在使用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如下所示：

现在，当我将div内部的选择移动到1时所以它是第三个而不是页面中的第四个项目，它会搞得一团糟。以下是来自开发人员工具的新页面和呈现的HTML：

如您所见，选择字段不再对齐，缺少第三个div的结束标记，以及第四个div的开始div和span。无论我在列表中的哪个位置选择了div，都会发生这种情况。原始的HTML片段很好，但Angular渲染的HTML都搞砸了。

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

Answer 1

想出来。这样：

<h1 align=center>Register with our portal</h1>

<FORM id="register" onsubmit="return checkForm();" METHOD="POST">

  <table name="myTab" border=0 align=center>
    <tr>
      <td> Username </td>
      <td> </td>
      <td><input name="username" class=textbox type=t ext required></td>
    </tr>
    <tr>
      <td> Password </td>
      <td> </td>
      <td><input name="passwd" class=textbox type=p assword required></td>
    </tr>
    <tr>
      <td> Confirm Password </td>
      <td> </td>
      <td><input name="c_password" class=textbox type=p assword required></td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td> <input class=button type=s ubmit value=R egister> </td>
    </tr>
  </table>
</FORM>

应该是：

<select ng-model="activeProfile.awardyear" ng-options="ay.display for ay in awardYears"/>

我更习惯使用XML，在那里不会产生任何影响。感谢@HubertGrzeskowiak的建议。

Angular 1选择不正确渲染

1 个答案: