Question

我想在表格行中重复数据。但是，当我单击该行的最后一个td中的一个按钮时，我希望在其下方显示另一行，并且仅在该元素下方显示。

我可以使用ng-repeat-show / end重复单独的数据，但它会在所有主数据行上重复次要数据。代码：

    <table class="table table-bordered table-striped table-hover table-responsive">


        <tr ng-repeat-start="data in product_data | filter:'Flexi Floor/Low Wall':true">
            <td style="vertical-align:middle;">{{data.model_no_from}} + {{data.model_no_to}}</td>
            <td style="vertical-align:middle;">{{data.cooling}}</td>
            <td style="vertical-align:middle;">{{data.heating}}</td>
            <td style="vertical-align:middle;"><span class="blue">{{data.nominal_cooling}}</span><span class="red">{{data.nominal_heating}}</span></td>
            <td style="vertical-align:middle;">{{data.pipe_length}}</td>
            <td style="vertical-align:middle;">{{data.system_listPrice | currency:"&#163;"}}</td>
            <td class="td_button"><button class="btn btn-default btn-block td_button_border" ng-click="add()">Select</button></td>
        </tr>
        <tr ng-repeat-end ng-show="show_row">
            <td colspan="6">This will repeat</td>
        </tr>
    </table>

Answer 1

以下是我认为您正在寻找的一个更好的例子：http://plnkr.co/edit/z7gYsKxNffwm78aiEgQX?p=preview

基本上，如果您将表行建模为对象数组，则addRow（）按钮单击函数应在模型中插入新的行对象，并且当Angular将更改应用于视图时，ng-repeat将负责附加新排。

所以，如果这是你桌子的ng-repeat行：

<tr ng-repeat="row in rows track by $index">
  <td>{{$index}}</td>
  <td>{{row.details}}</td>
  <td><button ng-click="addRow($index)">Add Row</button></td>
</tr>

然后这个addRow（）函数和模型应该完成你之后的事情：

$scope.rows = [
  { details: 'Originally row 0' },
  { details: 'Originally row 1' },
  { details: 'Originally row 2' }
];

$scope.addRow = function(index){
  $scope.rows.splice( index+1, 0, { details: 'new row after clicking index '+index} );
};

使用ng repeat在主行下面创建第二行

1 个答案: