javascript - 在 ngRepeat 生成的每个表格行下方添加表格行

Question

我正在使用 ng-repeat 用数据填充表。这就是我的设置方式:

<tbody>
    <tr ng-repeat="client in clients | filter:x | filter:y |orderBy:predicate:!reverse | itemsPerPage: pageSize">
        <td><input id="option-{{client.id}}" type="checkbox" value=""></td>
        <td><a href="#/client/{{client.id}}">{{client.lastname}}</a></td>
        <td><a href="#/client/{{client.id}}">{{client.firstname}}</a></td>
        <td>{{client.status}}</td>
        <td>{{client.phone}}</td>
        <td><a href="mailto:{{client.email}}">{{client.email}}</a></td>
    </tr>
</tbody>

但我需要它在 ng-repeat 中创建的行下方添加一个表行。这可能吗？

Answer 1

您可以创建指令:

app.directive('addRow', function ($parse, $compile) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            var template = attrs.addRow ? $parse(attrs.addRow)(scope) : '<tr><td>-</td></tr>';
            elem.after(template);
            $compile(elem.contents());
        }
    }
});

它在每个元素后面添加传递的行模板。如果未传递模板，则使用默认模板。它还编译您的模板，因此您可以使用内部的所有 Angular 内容(例如 <td>{{variable}}</td> )。

使用示例:

<table>
    <tbody>
        <tr ng-repeat="item in [1,2,3,4]" add-row="'<tr><td>my template</td></tr>'">
            <td>{{item}}</td>
        </tr>
    </tbody>
</table>

这是 jsfiddle: http://jsfiddle.net/aartek/52b6e/