Question

我有桌子，上面有我的物品清单。每行都有自己的按钮“显示详细信息”。当我单击该按钮时，我想在表格中的选定行下面添加新行。让我们在我的控制器中说我有这些数据：

$scope.contacts = [
{first_name: 'John', last_name: 'Smith', gender: 'm', phone: '(123)456 779'},
{first_name: 'Bar', last_name: 'Baker', gender: 'm', phone: '(123)456 779'},
{first_name: 'Foo', last_name: 'Tailor', gender: 'm', phone: '(123)456 779'}];

然后在我的模板视图中看起来像这样

<table>
  <thead>
    <td>Actions</td>
    <td>First Name</td>
    <td>Last Name</td>
  </thead>
  <tbody>
  <tr ng-repeat="c in contacts">
    <td><button ng-click="showDetails(c)"</td>
    <td>{{c.first_name}}</td>
    <td>{{c.last_name}}</td>
  </tr>
  </tbody>
</table>

我的详细信息行应该是

<tr>
  <td colspan="3">
    <div>
      First name: {{selected_contact.first_name}}<br>
      Last name: {{selected_contact.last_name}}<br>
      Gender: {{selected_contact.gender}}<br>
      Phone: {{selected_contact.phone}}<br>
    </div>
  </td>
</tr>

考虑到表中可以有~1000所以我不想在每次ng-repeat之后添加额外的行，如果我使用ng-repeat-start / ng-repeat-我会有太多的观察者结束指示。

+------------+-------------+-------------+
|show_details|c1.first_name|c1.last_name |
+------------+-------------+-------------+
|selected_contact.first_name             |
|selected_contact.last_name              |
|selected_contact.gender                 |
|selected_contact.phone                  |
+------------+---------------------------+
|show_details|c2.first_name|c2.last_name |
+------------+-------------+-------------+

在此图片中，选择了c1并显示其详细信息。

Answer 1

如果没有看到您的HTML或提及表格的创建方式或数据来源是什么，那么就不可能给出更多的通用答案。假设您使用ng-repeat渲染表并且数据源是控制器中的数组，您只需使用array.splice（）在适当的位置插入数组中的行，填充数据。您的HTML代码可能包含2组标签 - 一组用于处理您现在拥有的显示器，另一组用于显示详细信息。您可以使用ng-show，ng-hide或ng-if中的一个或全部根据其包含的数据类型显示相应的内容。

在表格中的选定行下方追加行

1 个答案: