Question

有没有办法在ng-repeat中插入额外的行？这是问题所在。

<tr data-ng-repeat="user in content |pagination: currentPage*limit| limitTo: limit | filter: searchText ">
            <td>{{user.imie}}</td>
            <td>{{user.nazwisko}}</td>
            <td>{{user.data_urodzenia}}</td>
            <td>{{user.imie2}}</td>
            <td>{{user.imie}}</td>
            <td>{{user.imie}}</td>
            <td><i ng-click="showDetails()" class="fa fa-plus-square" aria-hidden="true"></i></td>
        </tr>

我有这个表重复。在最后一个单元格中有一个按钮，它将触发功能以显示用户的更多细节。所以我需要的是，在呈现的行下插入一个额外的行。

<tr ng-repeat...></tr>
<tr ng-show="details">additional data row</tr>

和控制器

$scope.details = false;
$scope.showDetails = function(){
    if (!details) {
        $scope.details = true;
    }
    else {
        $scope.details = false
    }
}

有什么办法吗？尝试了一些方法并没有成功。

Answer 1

您可以将ng-repeat放在tbody上，这可能会导致样式问题。

或者您可以使用ng-repeat-start / end。从角度1.2开始，你可以重复非常酷的元素 - 你可以这样做;

<tr ng-repeat-start="user in content |pagination: currentPage*limit| limitTo: limit | filter: searchText ">
        <td>{{user.imie}}</td>
        <td>{{user.nazwisko}}</td>
        <td>{{user.data_urodzenia}}</td>
        <td>{{user.imie2}}</td>
        <td>{{user.imie}}</td>
        <td>{{user.imie}}</td>
        <td><i ng-click="showDetails()" class="fa fa-plus-square" aria-hidden="true"></i></td>
    </tr>
<tr ng-repeat-end ng-show="details">additional data row</tr>

更多信息here。

希望它有所帮助！

Answer 2

在tbody标记中使用 ng-repeat ，然后您可以在新的tr代码上使用其他行

喜欢以下方式

<tbody data-ng-repeat="user in content |pagination: currentPage*limit| limitTo: limit | filter: searchText ">
        <tr> 
            <td>{{user.imie}}</td>
            <td>{{user.nazwisko}}</td>
            <td>{{user.data_urodzenia}}</td>
            <td>{{user.imie2}}</td>
            <td>{{user.imie}}</td>
            <td>{{user.imie}}</td>
            <td><i ng-click="showDetails()" class="fa fa-plus-square" aria-hidden="true"></i></td>
        </tr>
        <tr>
           // your additional row
        </tr>
</tbody>

还有一件事，你的代码是完全错误的

$scope.details = false;
$scope.showDetails = function(){
    if (!details) {
        $scope.details = true;
    }
    else {
        $scope.details = false
    }
}

以上代码将打开所有行，而不是特定行。因此，您需要通过Array of $index

进行维护

如何在表AngularJS中显示其他行

2 个答案: