Развернуть / свернуть нечетную строку в AngularJs

Question

Развернуть / свернуть нечетную строку в AngularJs

0

Я хочу развернуть/свернуть строку, я хочу скрыть все нечетные строки и нажав кнопку "+", эта скрытая строка должна стать видимой, мой текущий код позволяет мне скрыть все нечетные строки, но при нажатии кнопки "+" все строки становятся видимыми, мой вариант использования - показывать только нечетную строку, которая находится рядом с кнопкой даже по строке.

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

Abhay Pore 22 сен. 2015, в 11:56

Источник

Теги:

angularjs

ng-show

html5

angularjs-ng-repeat

ng-repeat

2 ответа

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

atfornes 22 сен. 2015, в 08:40

0

да, это сработало :) спасибо
Abhay Pore 22 сен. 2015, в 12:21

Ещё вопросы

Martijn · Accepted Answer · 2015-09-22T08-17-00.000Z

Причина, по которой все строки расширяются, когда вы нажимаете "плюс", заключается в том, что expanded переменная находится на контроллере. Таким образом, все строки "прослушивают" одну и ту же переменную.

Как указано в его ответе, вы можете использовать $index чтобы идентифицировать каждую строку. Другим решением является отслеживание текущего индекса на контроллере и проверка на каждую строку, если он должен быть показан:

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

И в событии click плюс знак плюса вы можете

ctrl.expanded = $index

Или вы можете справиться с этим в контроллере. В этом случае вы можете создать метод на контроллере, который принимает индекс, а затем установите это значение индекса для expanded переменной контроллера.