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

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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.