在由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重複創建的行。那可能嗎？

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()); 
     } 
    } 
}); 

它增加了每個元素後，通過排模板。如果模板未通過，則使用默認模板。它也編譯你的模板，所以你可以使用裏面的所有角的東西（例如，<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/

Answer 2

可以八方通手動添加一行到表所示：

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