Question

我想展开/折叠一行，我想要隐藏所有奇数行，点击“+”按钮，这些隐藏的行应该可见，我当前的代码允许我隐藏所有奇数行但是点击'+'按钮所有行都可见，我的用例是只显示旁边点击偶数行的奇数行。

<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

当你点击加号时所有行都展开的原因是变量expanded在控制器上。所以所有行都在“监听”同一个变量。

正如atfornes在答案中指出的那样，你可以用$index来识别每一行。另一个解决方案是跟踪控制器上的当前索引，如果必须显示，则检查每行：

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

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

ctrl.expanded = $index

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

Answer 2

在按钮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">

在AngularJs中展开/折叠奇数行

2 个答案: