Question

我有一个ng-repeat控件，包含textbox，textarea和删除图像图标。我正在为文本框textarea添加一个必需的验证器。一旦显示跨度错误消息，对齐就会失真。以下是使用的代码：

<div class="row">
                  <div class="form-group ">
                      <label class="form-group col-md-3">Language</label>
                      <label class="form-group col-md-4">Title</label>
                      <label class="form-group col-md-5">Description</label>
                  </div>
              </div>
              <div class="row">
                  <div>
                      <div ng-repeat="Descriptions in testsWithDescription ">
                          <div class="form-group col-md-2 top-Margin-language">
                              <label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
                          </div>
                          <div class="form-group col-md-4 top-Margin-Title">
                              <input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
                              <span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span> 
                          </div>

                          <div class="form-group col-md-5">
                              <textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
                              <span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
                          </div>

                          <div class="form-group col-md-1">
                              <a style="cursor:pointer">
                                  <img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
                              </a>

                          </div>
                      </div>
                  </div>
              </div>

使用ng-repeat时如何正确设置跨度的对齐方式？初始加载控件对齐正确。如果我删除标题或说明中的任何项目，然后单击“提交”，则会显示错误消息，但UI会变形。

由于

Answer 1

Bootstrap的row课程包含“clearfix”。这允许不同高度列的行始终从左侧开始。目前，您的html使用div类div中的嵌套row作为重复元素。如果将ng-repeat移动到row类div，则clearfixing将在每组列之后生效，并且应该按预期显示事物。

更新了HTML

<div class="row">
    <div class="form-group ">
        <label class="form-group col-md-3">Language</label>
        <label class="form-group col-md-4">Title</label>
        <label class="form-group col-md-5">Description</label>
    </div>
</div>
<div class="row" ng-repeat="Descriptions in testsWithDescription ">
    <div class="form-group col-md-2 top-Margin-language">
        <label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
    </div>
    <div class="form-group col-md-4 top-Margin-Title">
        <input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
        <span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span> 
    </div>
    <div class="form-group col-md-5">
        <textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
        <span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
    </div>
    <div class="form-group col-md-1">
        <a style="cursor:pointer">
        <img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
        </a>
    </div>
</div>

Answer 2

@haxxxton提供的解决方案是答案，即：你应该将ng-repeat移动到你的位置，因为这将提供bootstrap列所需的“clearfix”，以便允许额外跨度的高度变化。即<div class="row" ng-repeat="Descriptions in testsWithDescription">

带有错误消息对齐的ng-repeat

2 个答案: