Блог

Я использую 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. Возможно ли это?

Вы можете создать директиву:

 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 /

Вы всегда можете добавить строку вручную в таблицу, например:

 <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>
    <tr>
       <td>Footer 1</>
       <td>Footer 2</>
       <td>Footer 3</>
       <td>Footer 4</>
       <td>Footer 5</>
       <td>Footer 6</>
    </tr>
</tbody>
  

Еще лучше включить это в тег tfoot.

Или, если вам нужны две строки, вы можете сделать это:

 <tbody ng-repeat="item in items">
    <tr>
        <td>{{item.row_one_stuff}}</td>
        <td>{{item.more_row_one_stuff}}</td>
    </tr>
    <tr>
        <td>{{item.row_two_stuff}}</td>
        <td>{{item.more_row_two_stuff}}</td>
    </tr>
</tbody>