在ng-重复中显示和隐藏一个<div>和'dirPagination‘(AngularJS)
在ng-重复中显示和隐藏一个<div>和'dirPagination‘(AngularJS)
提问于 2018-09-14 20:50:17
在这个网站上，我见过很多次这个问题，但是没有一个问题适合我，因为有两件事:我需要div在单击“选项”按钮时切换，也需要在单击div外部时隐藏；我需要它来处理dirPagination。
我看过这个答案，它运行得很好，但有一个问题我无法解决:它同时显示所有隐藏的div，而不是只显示我单击的那个。
这是我的密码：
<body ng-controller="MainCtrl">
<!-- pagination -->
<dir-pagination-controls
max-size="7"
direction-links="true"
boundary-links="true">
</dir-pagination-controls>
<ul>
<li dir-paginate="report in reports | itemsPerPage:4">
<a href="#" ng-click="showOptions($event)">Options</a>
<h3>{{report.Title}}</h3>
<div class="options" ng-show="dp">
<p>These are some options</p>
</div>
</li>
</ul>
</body>和联合来展示这些选项：
//options div
$scope.showOptions = function(event){
if($scope.dp === false || $scope.dp === undefined) {
$scope.dp = true;
event.stopPropagation();
} else {
$scope.dp = false;
}
};
window.onclick = function(){
if($scope.dp){
$scope.dp = false;
$scope.$apply();
}
};我已经做了一个活塞，以防你想看到它的行动：我的柱塞连接
有人能帮我解决这个问题吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-09-14 21:05:13
您需要为要显示的每个div使用一个单独的变量。可以将dp属性添加到报表中。没有必要对报告进行循环以隐藏它们。您只需跟踪当前可见的报告，并在切换另一个报表时隐藏它。
下面是相关的HTML：
<li dir-paginate="report in reports | itemsPerPage:4">
<a href="#" ng-click="showOptions($event, report)">Options</a>
<h3>{{report.Title}}</h3>
<div class="options" ng-show="report.dp">
<p>These are some options</p>
</div>
</li>和JavaScript
var visibleReport;
$scope.showOptions = function(event, report){
if (report == visibleReport) {
report.dp = !report.dp;
}
else {
if (visibleReport) visibleReport.dp = false;
report.dp = true;
}
visibleReport = report
event.stopPropagation();
};
window.onclick = function(){
if (visibleReport) visibleReport.dp = false;
visibleReport = null;
$scope.$apply();
};Stack Overflow用户
发布于 2018-09-14 21:14:46
在报表数组中添加一个新的布尔属性，例如show
var reports = [
{
"ID":1,
"Title":"Report 1",
"Show":false
},
{
"ID":2,
"Title":"Report 2",
"Show":false
}
]将该属性应用于ng显示，并将当前的report作用域对象传递到showOptions方法中，以编写隐藏和显示的逻辑。
<li dir-paginate="report in reports | itemsPerPage:4">
<a href="#" ng-click="showOptions($event,report)">Options</a>
<h3>{{report.Title}}</h3>
<div class="options" ng-show="report.Show">
<p>These are some options</p>
</div>
</li>
$scope.showOptions = function(event,report){
report.Show=!report.Show;
/*you can iterate through each reports and change show to false if the clicked report id not equal to report id , Angular JS will automatically update the scope in to the view*/
reports.forEach(function(item, index) {
if (item.ID !== report.ID) {
item.Show = false;
}
});
if($scope.dp === false || $scope.dp === undefined) {
$scope.dp = true;
event.stopPropagation();
} else {
$scope.dp = false;
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52339064
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号