在表格单元格

Question

我想在表格单元格中使用ng-repeat。

下面是我使用把手而不使用AngularJs构建的表格：

Table 1, without using AngularJs

下面是我使用AngularJs构建的表格：

Table 2, using AngularJs

正如您所看到的，在表2中，书籍不在同一行，使得表格更“难看”。如何在表1中列出同一行中的书籍？

以下是我的AngularJs代码：

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

如果我使用“p”或“h”来嵌套ng-repeat，我会得到与多行显示的书名相同的结果。如何在表1中列出同一行中的书籍？

Answer 1

默认情况下，<p>标记是一个块元素。您可以使用<span>之类的内联元素来执行您想要的操作，也可以添加css规则来修改表格中<p>的默认行为

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