Как скрыть другое содержимое в шпионе прокрутки вместо прокрутки до определенной позиции - PullRequest
Новая
       2

Как скрыть другое содержимое в шпионе прокрутки вместо прокрутки до определенной позиции

0 голосов
/ 12 февраля 2019

У меня есть содержимое с некоторой ссылкой. Я использую здесь scrollspy.Всякий раз, когда я нажимаю на ссылку, ее прокрутка к определенному div и меню будет активна. Но здесь вместо прокрутки мне нужно скрыть другой div и показать определенный / соответствующий div. Я имею в виду, здесь вместо прокрутки мне нужно скрыть и показать содержимое,Вот обновленный код https://plnkr.co/edit/VvV7T0FCdXirQfMROwi2?p=preview

HTML 

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<script  src="script.js"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>
 <style type="text/css">
    .scroll-div {
      height: 300px;
      overflow: scroll;
      margin-top: 6.5em;
      scroll-behavior: smooth;
    }
    .anchor {
      border: 2px dashed red;
      padding: 10px 10px 200px 10px;
    }
    .my-fixed-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }
    .my-fixed-header > a {
      display: inline-block;
      margin: 5px 15px;
    }
    .html{
    scroll-behavior: smooth;
    }

  </style>
 <body ng-app="app">

  <div ng-controller="AccordionDemoCtrl">
   <div class="my-fixed-header">
      <a href="index.html#/#anchor{{x}}"  ng-click="gotoDiv(x)" ng-repeat="x in [1,2,3,4,5]">
        Go to Div {{x}}
      </a>
     <div style="border:1px solid;padding:20px;width:100%;background:yellow;">Header</div>
   </div>
    <div class="scroll-div">      
      <div style="border:1px solid;" id="anchor{{group.id}}"  ng-repeat="group in groups | filter:item.value ">
        <div class="parents"  ng-click="open(group)">{{ group.title }}        
        </div>
        {{ group.content }}
        <ul class="childs" ng-show="group.isOpen">
          <li ng-repeat="item in group.list">
            <span ng-bind-html="item"></span>
          </li>
        </ul>        
      </div>
    </div>
  </div>
  </body>

SCRIPT 

var app=angular.module('app', ['ui.bootstrap','ngSanitize','angular.filter']);
app.controller('AccordionDemoCtrl', function ($scope,$location,$anchorScroll) {
  $scope.oneAtATime = true;

$scope.gotoDiv = function(x) {
          $scope.groups.forEach(a=>{
               console.log(x);


            a.isOpen = true;


          });



     };

  $scope.groups = [
    {
      title: 'title 1',
      id:'1',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 1',
      id:'1',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 2',
      id:'2',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 3',
      id:'3',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]

    },
    {
      title: 'title 4',
      id:'4',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    },
    {
      title: 'title 5',
      id:'5',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
        ]
    }
  ];
$scope.groups[0].isOpen = true;
});

1 Ответ

0 голосов
/ 13 февраля 2019

Вам необходимо установить видимость для каждого элемента div, а затем переключать его в соответствии с щелчками по ссылке ... чтобы это работало, нам нужно сохранить статус видимости для каждого объекта в нашем массиве $scope.groups.Мы делаем это, вводя новую переменную visible в каждый объект массива, мы устанавливаем ее значение true для объекта, который нам нужно отобразить по умолчанию - остальные могут отображаться после нажатия на ссылки вверху.

Проверьте рабочую демонстрацию ниже: 

var app = angular.module('app', ['ui.bootstrap', 'ngSanitize', 'angular.filter']);
app.controller('AccordionDemoCtrl', function($scope, $location, $anchorScroll) {
  $scope.oneAtATime = true;
  $scope.visibleGrid=-1;

  $scope.gotoDiv = function(x) {
    $scope.visibleGrid=x;
    $scope.groups.forEach(a => {
      /* console.log(" we got ID:" + x + " & looking it against the ID:" + a.id); */
      a.isOpen = true;
    });

  };

  $scope.groups = [{
      title: 'title 0',
      id: '0',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]
    },
    {
      title: 'title 1',
      id: '1',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]
    },
    {
      title: 'title 2',
      id: '2',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]
    },
    {
      title: 'title 3',
      id: '3',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]

    },
    {
      title: 'title 4',
      id: '4',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]
    },
    {
      title: 'title 5',
      id: '5',
      list: ['<i>item1a</i> blah blah',
        'item2a',
        'item3a',
        'item4a',
        'item5a',
        'item6a',
        'item7a'
      ]
    }
  ];
  $scope.groups[0].isOpen = true;
});
.scroll-div {
  height: 300px;
  overflow: scroll;
  margin-top: 6.5em;
  scroll-behavior: smooth;
}

.anchor {
  border: 2px dashed red;
  padding: 10px 10px 200px 10px;
}

.my-fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.my-fixed-header>a {
  display: inline-block;
  margin: 5px 15px;
}

.html {
  scroll-behavior: smooth;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-sanitize.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js'></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'>

<body ng-app="app" >

  <div ng-controller="AccordionDemoCtrl">
    <div class="my-fixed-header">
      <a href="#{{x}}" ng-click="gotoDiv(x)" ng-repeat="x in [1,2,3,4,5]">
        Go to Div {{x}}
      </a>
      <div style="border:1px solid;padding:20px;width:100%;background:yellow;">Header</div>
    </div>
    <div class="scroll-div">
      <div style="border:1px solid;" id="anchor{{group.id}}" ng-repeat="group in groups | filter:item.value ">
        <ng-container ng-if='visibleGrid == group.id || visibleGrid == -1'>
          <div class="parents" ng-click="open(group)">{{ group.title }}
          </div>
          {{ group.content }}
          <ul class="childs" ng-show="group.isOpen">
            <li ng-repeat="item in group.list">
              <span ng-bind-html="item"></span>
            </li>
          </ul>
        </ng-container>
      </div>
    </div>
  </div>
</body>

ОБНОВЛЕНИЕ : (после комментария пользователя) по умолчанию отображаются все данные, а затем только после определенного щелчкасоответствующий раздел останется видимым

ОБНОВЛЕНИЕ # 2 : (после второго комментария пользователя) тот же результат без добавления чего-либо к данным JSON

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...