Question

我有一个使用angular 1.5框架在html中构建的表我想在glyphicon（点击/切换加号）时切换行扩展

以下是我从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>

有没有办法在不使用JQuery的情况下折叠和展开（隐藏/显示）<tr>部分ID为extraInfo？

我很欣赏任何有关尝试的建议。 -cheers

Answer 1

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

请参阅此DEMO的html。在此DEMO中，toggle是保存信息的数组。

Answer 2

为了扩展Saad的答案，我想在这里发布代码，以防掠夺者死亡等。基本上Saad建议使用每个ng-repeat项目的$index基于每个重复的文档范围本身并独立于整个集合。那么在这里发生的事情，在重复的初始化上我们使用ng-init并为转发器上的每个项创建一个范围toggle[$index]的对象。然后我们切换每次单击（true或false）以呈现被抑制的部分。

以下是html标记的示例

<tbody ng-repeat="pp in main.userProgress |filter:filteractivity:pp.activityName">
                    <tr>
                        <td>
                            <a class="btn btn-link" ng-init="toggle[$index] = false" ng-click="toggle[$index] =!toggle[$index]">
                                <span class="glyphicon glyphicon-plus-sign" ng-if="!toggle[$index]"></span>
                                <span class="glyphicon glyphicon-minus-sign" ng-if="toggle[$index]"></span>
                            </a>
                        </td>
                        <td><strong>{{pp.activityName}}</strong></td>
                        <td>
                            <uib-progressbar   value="pp.percentComplete" type="success" title="Your activity progress" >                           
                                    <b>{{pp.percentComplete}}%</b>                            
                            </uib-progressbar>
                        </td>
                        <td><label class="label label-success" ng-show="{{pp.status}}">Active</label><label ng-show="{{!pp.status}}" class="label label-danger">Inactive</label></td>
                        <td>{{pp.startDate | date: 'MM/dd/yyyy'}}</td>
                        <td>{{pp.endDate | date: 'MM/dd/yyyy'}}</td>
                    </tr>
                    <tr ng-if="toggle[$index]" id="extraInfo" colspan="6">
                        <td colspan="6">
                            <div style="margin-left: 80px">
                                <p>
                                    Name: <small>{{pp.summary.name}}</small>
                                </p>
                                <p>
                                    Deadline: <small>{{pp.summary.deadline | date: MM/dd/yyyy}}</small>
                                </p>
                                <p>
                                    Extra Info: <small>{{pp.summary.extraInfo}}</small>
                                </p>
                                <p>
                                    Comments: <small>{{pp.summary.comments}}</small>
                                </p>
                                <p>
                                    <a>View Alerts</a>
                                </p>
                            </div>
                        </td>
                    </tr>

                </tbody>

并且Saad表示控制器中不需要任何工作，因为html标记和角度在DOM中处理它。

希望这有帮助。

Answer 3

您可以为字形按钮创建一个简单的控制器，并使用ngclass添加一个可见/隐藏类。

使用css类，您可以更改元素的显示/不透明度/高度。

如何使用ng-repeat和angular折叠表的一行

3 个答案: