javascript - 如何使用 ng-repeat 和 Angular 折叠表格的一行

Question

我使用 Angular 1.5 框架在 html 中构建了一个表格，我想在字形图标(单击/切换加号)时切换行扩展

这是我从 html 结构中得到的内容

    <table class="table">
            <thead>
                <tr>
                    <td>&nbsp;</td>
                    <td><strong>Activity</strong></td>
                    <td><strong>Complete</strong></td>
                    <td><strong>Status</strong></td>
                    <td><strong>Starts</strong></td>
                    <td><strong>Ends</strong></td>
                </tr>
            </thead>
            <tbody ng-repeat="pp in main.userProgress">
            <tr>
                <td><a class="btn btn-link"><span class="glyphicon glyphicon-plus-sign"></span></a></td>
                <td><strong>{{pp.activityName}}</strong></td>
                <td>
                    <uib-progressbar animate="false" value="dynamic" type="success"><b>{{pp.percentComplete}}%</b></uib-progressbar>
                </td>
                <td><label class="label-success" ng-show="{{pp.status}}">Active</label><label ng-show="{{!pp.status}}" class="label-danger">Inactive</label></td>
                <td>{{pp.startDate | date: 'MM/dd/yyyy'}}</td>
                <td>{{pp.endDate | date: 'MM/dd/yyyy'}}</td>
            </tr>
            <tr id="extraInfo" colspan="6">
                <td colspan="6">
                    <div style="margin-left:80px">
                        <p>Name:</p>
                        <p>Deadline:</p>
                        <p>Extra Info:</p>
                        <p>Comments:</p>
                        <p>
                            <a>View Alerts</a>
                        </p>
                    </div>
                </td> 
            </tr>

            </tbody>
        </table>

有没有办法折叠和展开(隐藏/显示)<tr>部分 id 为 extraInfo 而不使用 JQuery？

如果有任何有关尝试的建议，我将不胜感激。 -干杯

Answer 1

是的。在 AngularJS 中很容易做到。创建任何变量作为 obj/array。使用 ng-repeat 的 $index 来跟踪迭代对象的切换信息。您甚至不必在 js 中编写单个代码。

查看此 DEMO 的 html 。在此DEMO ，toggle是保存信息的数组。