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> </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> </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
Share Improve this question asked May 9, 2016 at 23:35 rlcrewsrlcrews 3,56221 gold badges72 silver badges121 bronze badges3 Answers
Reset to default 4Yes. 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
版权声明:本文标题:javascript - how to collapse a row of a table using ng-repeat and angular - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742021626a2414782.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论