javascript - how to collapse a row of a table using ng-repeat and angular - Stack Overflow

admin管理员组

文章数量:1317572

I've got a table built in html using angular 1.5 framework I want to toggle the row expansion when the glyphicon (plus sign is clicked/toggled)

Here is what I have from the html structure

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

Is there a way to collapse and expand (hide/show) the <tr> section id'd as extraInfo without using JQuery?

I'd appreciate any suggestions on what to try. -cheers

I've got a table built in html using angular 1.5 framework I want to toggle the row expansion when the glyphicon (plus sign is clicked/toggled)

Here is what I have from the html structure

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

Is there a way to collapse and expand (hide/show) the <tr> section id'd as extraInfo without using JQuery?

I'd appreciate any suggestions on what to try. -cheers

• javascript
• angularjs

Share Improve this question Follow asked May 9, 2016 at 23:35 rlcrewsrlcrews 3,5622121 gold badges7272 silver badges121121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Yes. It's easy to do in angularjs. Create any variable as an obj/array. Use the $index of ng-repeat to track iterating object's toggle information. You won't even have to write single code in js.

See the html of this DEMO. In this DEMO, toggle is the array that keeps information.

Just to expand on Saad's answer I wanted to post the code here in case the plunker ever died etc. Basically what Saad suggests is to use $index of each ng-repeat item which based upon the documentation each repeat has a scope unto itself and independent of the entire collection. So what happens here, on the initialization of the repeat is we use ng-init and create a scoped object of toggle[$index] for each item on the repeater. We then toggle on each click (true or false ) to render the suppressed section.

Here is an example of the html markup

<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.ments}}</small>
                                </p>
                                <p>
                                    <a>View Alerts</a>
                                </p>
                            </div>
                        </td>
                    </tr>

                </tbody>

and as Saad stated no work is needed in the controller as the html markup and angular handle it for you in the DOM.

Hope this helps.

You can create a simple controller for your glyph button and and add a visible/hide class with ngclass.

With the css class you can change the display/opacity/height if your element.

本文标签： javascripthow to collapse a row of a table using ngrepeat and angularStack Overflow