将错误消息放在我的表格行下（样式）答案

【问题标题】：Putting error messages under my table rows (style)将错误消息放在我的表格行下（样式）
【发布时间】：2017-03-14 01:46:22
【问题描述】：

我正在为我的应用创建一个评论页面，其中显示已上传的文件。我遇到的问题是....当用户上传某些有错误的文件时，我会显示一条警告消息。我能够显示消息，但我想在每个上传的文件下方显示消息。现在我的文件显示在表格中并且出现错误消息，但我不确定如何正确修复文件名下方的错误消息。

html:

<tr ng-repeat="file in files">
     <td class="name-col">{{file.name}}</td>
     <td class="description">{{file.description}}</td>
     <td class="error-message">{{file.error_message}}</td>
</tr>

css:

table {
    table-layout: fixed;
    margin-bottom: 0;
    margin-top: 8px;

    th {
      text-transform: uppercase;
    }

    td, td span {
      word-break: break-all;
    }
  }

【问题讨论】：

标签： css angularjs twitter-bootstrap html-table

【解决方案1】：

如何将错误消息放在消息摘要之后而不是新列中。如：

<tr ng-repeat="file in files">
     <td class="name-col">{{file.name}}</td>
     <td class="description">
         {{file.description}}
         {{file.error_message}}
     </td>
</tr>

另外我会假设 file.error_message 从外观上看也返回了一个元素容器，所以只要确保它是一个块类型的元素，它就会在新行上呈现。

否则，您可能希望动态创建一个 colspan 为 2 的新行。

【讨论】：

【解决方案2】：

如果您希望某一列中同一行的错误消息，您可以使用@Adrianapolis 的答案。

如果您想在新行中显示错误消息，可以使用ng-repeat-start 和ng-repeat-end 指令：

<tr ng-repeat-start="file in files">
    <td class="name-col">
        {{ file.name }}
    </td>
    <td class="description">
        {{ file.description }}
    </td>
</tr>
<tr ng-repeat-end
    ng-show="file.error_message">
    <td colspan="2" class="error-message">
        {{ file.error_message }}
    </td>
</tr>

或者如果ng-repeat-end 会导致ng-show 指令出现问题，您可以随时重复tbody 元素：

<tbody ng-repeat="file in files">
    <tr>
        <td class="name-col">{{file.name}}</td>
        <td class="description">{{file.description}}</td>
    </tr>
    <tr ng-if="file.error_message">
        <td class="error-message">{{file.error_message}}</td>
    </tr>
</tbody>

【讨论】：

【解决方案3】：

您可以在上传的文件名下方显示错误消息，如下所示：

 <tr ng-repeat="file in files">
   <td class="name-col">{{file.name}}<br><span class="has-error">{{file.error_message}}</span></td>
   <td class="description">{{file.description}}</td>
 </tr>

利用 bootstrap css 类 'has-error' 以红色显示错误消息（如果您使用的是 bootstrap）

【讨论】：