使用 'dirPagination' (AngularJS) 在 ng-repeat 中显示和隐藏 <div>

Question

在这个网站上我已经多次看到这个问题，但其中 none 对我有用，因为有两件事：我需要 div 在单击 [=29] 时切换=] 按钮，也可以在 div 之外点击时隐藏；我需要它与 dirPagination 一起使用。

我看到了，它工作正常但是有一个我无法解决的问题：它同时显示所有隐藏的 divs，而不是只显示我的那个点击了。

这是我的代码：

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

以及显示选项的 JS：

//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();
    }
};

我制作了一个 Plunker，以防你想实际使用它：my Plunker link
有人可以帮我解决这个问题吗？ :(

Answer 1

您需要为每个要显示的 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();
};

这是一个正在工作的 plunker https://next.plnkr.co/edit/sWLxBGlF8D22nvYp?preview

Answer 2

在您的报告数组中添加一个新的布尔值属性，例如 show

 var reports = [
        {
          "ID":1,
          "Title":"Report 1",
          "Show":false
        },
        {
          "ID":2,
          "Title":"Report 2",
           "Show":false
        }
]

将属性应用于 ng-show 并将当前 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;
                }
            };

https://next.plnkr.co/edit/hnhWMrgR3GMtVcES

使用 'dirPagination' (AngularJS) 在 ng-repeat 中显示和隐藏 <div>

Show and Hide a <div> inside an ng-repeat with 'dirPagination' (AngularJS)

angularjs

ng-show

dirpagination