Question

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

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;
    }
  }

Answer 1

如何在Message Digest之后而不是在新列中放置错误消息。如：

<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的新行。

Answer 2

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

如果您想在新行中显示错误消息，可以使用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>元素：

{{1}}

Answer 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）

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

3 个答案: