Javascript 在动态生成的表angularjs中显示/隐藏元素（div）

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

{{产品名称}}
在23天内完成目标
完成状态：完成
显示更多细节
这里有一些产品说明

对于每个元素，我希望能够动态展开产品详细信息-当他们单击div show more details时，显示包含产品详细信息的div-当用户再次按下按钮时，隐藏包含详细信息的div

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

显示更多详细信息
这里有一些产品说明

---

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

如果您正在使用

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>

显示更多详细信息
这里有一些产品说明
应用指令（'detailsToggler'，函数（）{
返回{
限制：“C”，
编译：函数（元素，属性）{
返回函数（范围、元素）{
元素上（'click'，函数（事件）{
$（元素）.next（'.details'）.slideToggle（）；
});
}
}
}
})

格式化后，您可以看到您的标记结构存在问题。您正在使用

ng repeat

构建表格吗？谢谢-效果很好！使用指令或第一种方法更好吗？这是一个有待讨论的问题，取决于上下文因素，比如你在页面的这一部分还计划了什么。通常，最简单的解决方案是正确的。