Expand/collapse AngularJs 中的奇数行

Question

我想 expand/collapse 一行，我想隐藏所有奇数行，单击“+”按钮时，那些隐藏的行应该可见，我当前的代码允许我隐藏所有奇数行，但是单击“+”按钮所有行都可见，我的用例是仅显示单击的偶数行旁边的奇数行。

<table class="table table-bordered">
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Type</th>
        </tr>
    </thead>
    <tbody ng-repeat="test in ctrl.SearchResults">

        <tr ng-if="$even">
            <td>
                <button ng-click="ctrl.expanded = !ctrl.expanded" expand>
                    <span ng-bind="ctrl.expanded ? '-' : '+'"></span>
                </button></td>
            <td>{{test.apName}}</td>
            <td>{{test.type}}</td>

        </tr>
        <tr ng-show="ctrl.expanded" ng-if="$odd">
            <td></td>
            <td>{{test.apName}}</td>
            <td>{{test.type}}</td>
        </tr>

    </tbody>
</table>

Answer 1

在按钮 ng-click 代码处，您可以使用如下代码存储当前 $index：

<button ng-click="ctrl.expanded = !ctrl.expanded; ctrl.index = $index" expand>

然后，您可以将 ng-show 条件更改为仅在 ctrl.expanded 和 $index === ctrl.index + 1:

时显示项目

<tr ng-show="ctrl.expanded && $index === ctrl.index +1" ng-if="$odd">

Answer 2

当您点击加号时所有行都会扩展的原因是变量 expanded 在控制器上。所以所有的行都是 'listening' 到同一个变量。

正如 atfornes 在他的回答中指出的那样，您可以使用 $index 来标识每一行。另一种解决方案是跟踪控制器上的当前索引并检查每行是否必须显示他：

<tr ng-show="ctrl.expanded == $index" ng-if="$odd">

在加号的点击事件上你可以

ctrl.expanded = $index

或者您可以在控制器中进行处理。在这种情况下，您可以在接受索引的控制器上创建一个方法，然后将此索引值设置为控制器的变量 expanded.

Expand/collapse AngularJs 中的奇数行

Expand/collapse odd row in AngularJs

html

angularjs

ng-repeat

angularjs-ng-repeat

ng-show