CODEWITHSUNDEEP
htmlangularjs
Ealon
Ealon

Reputation: 4898

Use ng-repeat in a table cell

I want to use ng-repeat in a table cell.

Below is the table I built using handlebar without using AngularJs:

Table 1, without using AngularJs

Below is the table I built using AngularJs:

Table 2, using AngularJs

As you can see, in table 2, the books are not in the same line, making the table more "ugly". How can I list the books in the same line just like in table 1?

Below is my AngularJs code:

<tbody>
    <tr data-ng-repeat="author in authors">
        <td>{{author.authorId}}</td>
        <td>{{author.authorName}}</td>
        <td><p data-ng-repeat="book in author.books">"{{book.title}}"</p></td>
        <td><button type="button" class="btn btn-sm btn-primary btn-table" data-ng-click="showUpdateAuthorModal(author.authorId)">Update</button></td>
        <td><button type="button" class="btn btn-sm btn-danger btn-table" data-ng-click="showDeleteAuthorModal(author.authorId)">Delete</button></td>
    </tr>
</tbody>

If I use "p" or "h" to nest ng-repeat, I get the same result with book titles shown in multiple lines. How can I list the books in the same line just like in table 1?

Upvotes: 0

Views: 1186

Answers (1)

charlietfl
charlietfl

Reputation: 171679

By default a <p> tag is a block element. You can use an inline element like <span> to do what you want or add css rules to modify the default behavior of <p> in your table

<td><span data-ng-repeat="book in author.books">"{{book.title}}" </span></td>

Upvotes: 1

Related Questions