求助：ng-repeat渲染div半页布局异常问题

我来帮你拆解下布局出错的核心原因，以及对应的解决办法：

核心问题点 #

1. 两个独立ng-repeat导致分组渲染
   你用了两个分开的ng-repeat，第一个循环先渲染所有文本框类型的字段，第二个循环再渲染所有下拉框类型的字段。这就会导致所有文本框先占满整行排列，之后才轮到下拉框，完全打破了你“依次排列、每行两个”的预期。

2. 缺少Bootstrap栅格必需的row容器
   Bootstrap的栅格系统要求列（col-*）必须包裹在行（row）里面，你直接在col-md-12下嵌套col-md-6，没有row来处理列的浮动和间距，会导致布局混乱，出现单个列占满整页的情况。

3. 额外的小问题

   • 文本框的id固定为domain，会导致多个元素id重复（HTML规范不允许）；
   • 下拉框的ng-model绑定到了field.allowedValues（一个数组），这会导致选中值逻辑异常。

修复后的代码 #

<div class="col-md-12">
  <!-- 新增row容器，符合Bootstrap栅格结构要求 -->
  <div class="row">
    <!-- 合并两个ng-repeat为一个，按原顺序依次渲染每个字段 -->
    <div class="form-group col-md-6" ng-repeat="field in selectedfields">
      <label class="control-label" for="{{field.name}}">{{field.name}}</label>
      
      <!-- 文本框：仅当无可选值时渲染 -->
      <input 
        placeholder="{{field.name}}" 
        class="form-control" 
        type="text" 
        id="{{field.name}}"
        ng-if="!field.allowedValues || field.allowedValues.length === 0">
      
      <!-- 下拉框：仅当有可选值时渲染 -->
      <select 
        class="form-control" 
        id="{{field.name}}"
        <!-- 绑定到单独的选中值对象，避免污染原字段数据 -->
        ng-model="selectedFieldValues[field.name]"
        ng-if="field.allowedValues && field.allowedValues.length >= 1">
        <option 
          value="{{allowedValue.name}}" 
          ng-repeat="allowedValue in field.allowedValues">
          {{allowedValue.name}}
        </option>
      </select>
    </div>
  </div>
</div>

关键修复说明 #

• 合并ng-repeat：把两个循环合并成一个，让每个字段按selectedfields的原始顺序依次渲染，不管是文本框还是下拉框，都会按“每行两个”的规则排列；
• 添加row容器：让所有col-md-6元素在row内，Bootstrap会自动处理列的浮动和间距，确保布局符合预期；
• 修正id和ng-model：保证每个输入控件的id唯一，同时把下拉框的选中值绑定到单独的对象（比如selectedFieldValues），避免修改原字段的数组数据。

内容的提问来源于stack exchange，提问作者Manoj Majumdar