如何在表AngularJS中显示其他行

is there any way to insert additional row in ng-repeat ? Here is the problem.

有没有办法在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>

I have this table with repeating. In last cell there is a button that will trigger function to show more details of user. So what i need is, an additional row inserted under presented row.

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

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

and the controller

和控制器

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

Any way to do this ? Tried few approaches and didn't worked out.

有什么办法吗?尝试了一些方法,但没有成功。

2 个解决方案

#1

You can either put the ng-repeat on the tbody, which will likely cause some issues with styling.

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

Or you can use ng-repeat-start/end. As of angular 1.2, you can repeat over elements which is pretty cool - to do this you can;

或者你可以使用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>

More information here.

更多信息在这里。

Hope it helps!

希望能帮助到你!

#2

Use your ng-repeat in tbody tag, then you can use your additional row on a new tr tag

在tbody标签中使用ng-repeat,然后可以在新的tr标签上使用附加行

like this below way

像这样下面的方式

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

And one more thing, Your code is totally wrong

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

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

this above code will open all row, not particular row. So you need maintain with this by Array of $index

以上代码将打开所有行,而不是特定行。所以你需要通过$ index的数组来维护它

#1