Tengo una tabla construida en html usando el marco angular 1.5 Quiero alternar la expansión de fila cuando el glifo (se hace clic / se alterna el signo más)

Esto es lo que tengo de la estructura 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>

¿Hay alguna manera de colapsar y expandir (ocultar / mostrar) la sección <tr> identificada como extraInfo sin usar JQuery?

Agradecería cualquier sugerencia sobre qué probar. -salud

2
rlcrews 10 may. 2016 a las 02:35

3 respuestas

La mejor respuesta

Si. Es fácil de hacer en angularjs. Cree cualquier variable como un obj / array. Use el índice $ de ng-repeat para rastrear la información de alternancia del objeto iterativo. Ni siquiera tendrá que escribir código único en js.

Vea el html de esta DEMO. En este DEMO, toggle es la matriz que guarda la información.

4
Saad 10 may. 2016 a las 01:41

Solo para ampliar la respuesta de Saad, quería publicar el código aquí en caso de que el explotador alguna vez muriera, etc. Básicamente, lo que Saad sugiere es usar $index de cada elemento ng-repeat que, según la documentación, cada repetición tiene un alcance para propia e independiente de toda la colección. Entonces, lo que sucede aquí, en la inicialización de la repetición es que usamos ng-init y creamos un objeto de alcance de toggle[$index] para cada elemento en el repetidor. Luego alternamos en cada clic (verdadero o falso) para representar la sección suprimida.

Aquí hay un ejemplo del marcado 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>

Y como dijo Saad, no se necesita trabajo en el controlador, ya que el marcado html y angular lo manejan en el DOM.

Espero que esto ayude.

1
rlcrews 11 may. 2016 a las 01:59

Puede crear un controlador simple para su botón de glifo y agregar una clase visible / oculta con ngclass.

Con la clase css puede cambiar la visualización / opacidad / altura si su elemento.

0
Davide Melfi 9 may. 2016 a las 23:41