CODEWITHSUNDEEP
javascriptangularjs
rlcrews
rlcrews

Reputation: 3562

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

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

Upvotes: 2

Views: 10386

Answers (3)

rlcrews
rlcrews

Reputation: 3562

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.comments}}</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.

Upvotes: 1

Saad
Saad

Reputation: 952

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.

Upvotes: 4

Davide Melfi
Davide Melfi

Reputation: 250

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.

Upvotes: 0

Related Questions