jeremy jeremy - 1 month ago 5
AngularJS Question

Putting error messages under my table rows (style)

I am making a review page for my app where its displays files that were uploaded. the problem I am having is....when a user uploads certain files that have errors in them, I display a warning message. I am able to display the messages but I want to display the messages below every file that was uploaded. Right now i have the files displaying in a table and the error messages come up but I'm not sure how to properly fix the error message below the file names.

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

If you want the error messages in the same row in one of the columns, you can use @Adrianapolis's answer.

If you want the error messages in a new row, you can use the ng-repeat-start and ng-repeat-end directive:

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

Or if the ng-repeat-end will cause issues with the ng-show directive, you can always just repeat over a tbody element:

<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>
Comments