javascript - 在动态生成的表angularjs中显示/隐藏元素(div)

Question

我在 angularJS 中创建了一个工作表，如下所示:

<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>

对于每个元素，我希望能够动态扩展产品详细信息——当他们点击 div 时显示更多详细信息，包含产品详细信息的 div 会显示——当用户再次按下按钮时，包含详细信息已隐藏。

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

我怎样才能在 angularJS 中做到这一点。谢谢

Answer 1

如果您使用 ng-repeat 构建表格，您可以这样做:

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

如果没有，您可能需要一个指令:

<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>