Angularjs - Невозможно свернуть конкретный div при прокрутке до определенной позиции div при нажатии на определенную ссылку

У меня есть некоторые div из ng repeat, а также некоторые меню из ng repeat. Здесь при загрузке страницы мои div свернуты, кроме первого div. Когда я нажимаю на любое меню выше, оно прокручивается до конкретного div. Здесь проблема в том, что все div остаются открытыми после нажатия на любое меню. На самом деле должен открываться только определенный прокручиваемый div, а другие должны закрываться. Может кто-нибудь, пожалуйста, помогите мне, я новичок в angularjs. Вот код ниже, а также обновленный в plunker. https://plnkr.co/edit/MRZgVHYMWsff022Mq3dV?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 = "js/index.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: 100px;
      overflow: scroll;
      margin-top: 10px;
    }
    .anchor {
      border: 2px dashed red;
      padding: 10px 10px 200px 10px;
    }
    .my-fixed-header {

    }
    .my-fixed-header > a {
      display: inline-block;
      margin: 5px 15px;
    }
  </style>
 <body ng-app = "app">

  <div ng-controller = "AccordionDemoCtrl">
   <div class = "my-fixed-header">
      <a href = "index.html#/#anchor{{x}}" href = "" ng-click = "gotoDiv(x)" ng-repeat = "x in [1,2,3,4,5]">
        Go to Div {{x}}
      </a>
   </div>
   <input type = "text" ng-model = "item.value" ng-change = "onTextChange()">
    <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)"><i ng-class = "{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> {{ 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>

index.js

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

  $scope.open = function (item) {
    $scope.groups.filter(a=> a ===item).forEach(a=>{
      a.isOpen = !a.isOpen;
    });
    $scope.closeOthers(item);

  }
$scope.onTextChange = function(item) {

       if ($scope.item.value){
          $scope.groups.forEach(a=>{
            a.isOpen = true;
          });
       }
       else{
          $scope.groups.forEach(a=>{
            a.isOpen = false;
          });
          $scope.groups[0].isOpen = true;
       }
  };

  $scope.closeOthers = function (item) {
    $scope.groups.filter(a=> a !==item).forEach(a=>{
      a.isOpen = false;
    });
  }
$scope.gotoDiv = function(x) {



          $scope.groups.forEach(a=>{
            a.isOpen = true;
          });


     };

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

    },
    {
      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;
});

Может ли кто-нибудь помочь мне, я новичок в angularjs

— 09.01.2019 18:17

html css angularjs

09.01.2019 14:36

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

124

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я решил эту проблему и обновил плункер https://plnkr.co/edit/MRZgVHYMWsff022Mq3dV?p=preview

HTML и CSS

 <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: 100px;
      overflow: scroll;
      margin-top: 10px;
    }
    .anchor {
      border: 2px dashed red;
      padding: 10px 10px 200px 10px;
    }
    .my-fixed-header {

    }
    .my-fixed-header > a {
      display: inline-block;
      margin: 5px 15px;
    }
  </style>
<body>
<div ng-app = "myApp" ng-controller = "myCtrl">
 <div class = "my-fixed-header">
      <a ng-repeat = "y in players" href = "index.html#{{y.technology}}"  ng-click = "gotoDiv(y)" >
        Go to Div {{y.technology}}
      </a>
   </div>
<select class = "change" ng-model = "x" ng-change = "update()">
<option value = "technology"><p>view by</p>-<p>technology</p></option>
<option value = "vertical">vertical</option>
</select>
<div><button>Sort-ascending alphabetical order</button></div>
<div><button>Sort-descending alphabetical order</button></div>

<div class = "scroll-div">
<div style = "border:1px solid;" ng-repeat = "(key, value) in players | groupBy: attr" ng-attr-id = "{{key}}">
  <h4>Group name: {{ key }}{{value.length}}</h4>
 <div  ng-repeat = "group in value">
  <div class = "parents"  ng-click = "open(group)"><i ng-class = "{'glyphicon-minus': group.isOpen, 'glyphicon-plus': !group.isOpen}"></i> Title        
        </div>


  <div ng-attr-id = "{{key}}" class = "childs" ng-show = "group.isOpen" style = "height:70px;">
    player: {{ group.name }} 
    </div>

  </div>
</div>
</div>
</div>

script.js

var app = angular.module("myApp", ['angular.filter']);
app.controller("myCtrl", function($scope) {
$scope.oneAtATime = true;
$scope.players = [
    {
      name: 'projectjava',
      symptom:'fever',
      technology:'java',
       vertical:'insurance',      
      id:'1'
    },

    {
      name: 'projecttabulue',
      symptom:'diesease',
      technology:'tabulue',
       vertical:'Banking',    
      id:'2'
    },
    {
      name: 'projectpython1',
      symptom:'diesease',
      technology:'python',
       vertical:'Health care',    
      id:'3'
    },
    {
     name: 'projectpython2',
      symptom:'colds',
      technology:'python',
       vertical:'Banking',    
      id:'4'
    }

    ];
    $scope.players[0].isOpen = true;
     $scope.update = function() {      
  if ($scope.x == 'technology'){
   $scope.id='technology';
    $scope.attr = 'technology'; 


   }
   if ($scope.x == 'vertical'){
   $scope.id='vertical';
   $scope.attr = 'vertical';    
   }
   }
   $scope.open = function (item) {
    $scope.players.filter(a=> a ===item).forEach(a=>{
      a.isOpen = !a.isOpen;
    });
    $scope.closeOthers(item);

  }
$scope.gotoDiv = function(y) {
          $scope.players.forEach(a=>{
          console.info(a.technology);
          if ($scope.x == 'technology'){
              if (a.technology === y.technology.toString()) {  
            a.isOpen = true;
             }
               else{
          a.isOpen = false;           
      } 
}     
          });  
     };
  $scope.closeOthers = function (item) {
    $scope.players.filter(a=> a !==item).forEach(a=>{
      a.isOpen = false;
    });
  }

});

15.01.2019 13:17