Question

我正在寻找一种方法来动态地将行添加到由ng-repeat填充的表中。我要添加的行不符合正在重复的模型，它在布局和内容方面完全不同。

我可以通过jQuery轻松实现这一点但是当我在AngularJS工作时，我开始在Angular中寻找解决方案，但没有成功。

每一行都有一个显示其他详细信息的按钮，我希望在所选行下折叠打开。

<table>
        <thead>
                <tr>
                        <td>Name</td>
                        <td>Details</td>
                        <td></td>
                </tr>
        </thead>
        <tbody>
            <tr ng-repeat="schedule in schedules">
                <td><strong>{{ schedule.Name }}</strong></td>
                <td>
                        Running for <b>{{ schedule.TotalHours }} Hours</b> a week<br/>
                        // Clicking this would show data underneath this row
                        <a href class="example">view details</a> 
                </td>
                <td>
                        <button ng-click="attach(schedule)">USE</button>
                </td>
            </tr>
        </tbody>
</table>

我将使用jQuery的方法（如果这回答任何问题）：

$("table").on("click", ".example", function() {
    $(this).closest("tr").after("<tr> .. stuff .. </tr>");
});

Answer 1

使用ng-repeat-start和ng-repeat-end，并在日程表中使用open属性来指明是否应为每个日程安排显示详细信息。

这是一个（相当粗略）的Plunker，但它应该可以帮助你理解：https://plnkr.co/edit/UKym8FxbdYi6g3LVCcQG?p=preview

JS：

$scope.schedules = [
  {name: 'first', details: 'Immah first'},
  {name: 'second', details: 'Immah second'},
  {name: 'third', details: 'Third details'},
  {name: 'fourth', details: 'Fourth details'}
]

HTML：

<table>
  <tr>
    <th>Name</th>
    <th>Details</th>
  </tr>
  <tr ng-repeat-start="schedule in schedules" ng-click="">
    <td>{{schedule.name}}</td>
    <td ng-click="schedule.open = !schedule.open">View details</td>
  </tr>
  <tr ng-repeat-end ng-show="schedule.open">
    <td colspan="3">{{schedule.details}}</td>
  </tr>
</table>

向ng-repeated表添加行

1 个答案: