Показать и скрыть <div>внутри ng-повторения с помощью 'dirPagination' (AngularJS) - PullRequest
Новая
       12

Показать и скрыть <div>внутри ng-повторения с помощью 'dirPagination' (AngularJS)

0 голосов
/ 14 сентября 2018

На этом самом сайте я видел этот вопрос много раз, но ни один из них не работает для меня из-за двух вещей: мне нужно, чтобы 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>

И 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 на случай, если вы захотите запустить его в действие: моя ссылка на Plunker
Может кто-нибудь помочь мне с этой проблемой?(

Ответы [ 2 ]

0 голосов
/ 15 сентября 2018

Добавьте новое логическое свойство в массив отчетов, например show 

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

Примените свойство in к ng-show, а также передайте текущий объект report scope в 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

0 голосов
/ 15 сентября 2018

Вам нужно использовать отдельную переменную для каждого 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();
};

Вот рабочий поршень https://next.plnkr.co/edit/sWLxBGlF8D22nvYp?preview

...