show/hide elements (div) in a dynamically generated table angularjs

Question

I have created a working table in angularJS, like this:

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th class="col-xs-12" ng-click="sort('firstName')"> <span class="glyphicon sort-icon" ng-show="sortKey=='firstName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>

                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-click="showModal($event, user.emailAddress)" dir-paginate="user in users|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
                <td>
                    <div style="padding-top:1em">{{Product name}}
                        <div>
                            <div style="padding-top:1em">Complete target in:<span> 23 days</span>
                            </div>
                            <div>completion status: done</div>
                        </div>
                        <div style="padding-top:1em">Show more details</div>
                        <div ng-show='false'>some product description here</div>
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

For each element I want to be able to expand the product details dynamically - when they click on the div show more details, the div containing the product details is shown - when the user presses the button again, the div that contains the details are hidden.

<div style="padding-top:1em">Show more details</div>
<div ng-show='false'>some product description here</div>

How can I do this in angularJS. Thanks

Answer 1

If you're using ng-repeat to build the table, you can do this:

<div ng-click="show{$index}=!show{$index}">Show more details</div>
<div ng-show="show{$index}">some product description here</div>

If not, you'll probably want a directive:

<div class="details-toggler">Show more details</div>
<div class="details">some product description here</div>

<script>
app.directive('detailsToggler', function () {
    return {
        restrict: 'C',
        compile: function (element, attr) {

            return function (scope, element) {
                element.on('click', function (event) {
                    $(element).next('.details').slideToggle();
                });
            }
        }
    }
})
</script>