Атрибут переключения для отдельных элементов div при нажатии на соответствующую ссылку - PullRequest
Новая
       22

Атрибут переключения для отдельных элементов div при нажатии на соответствующую ссылку

1 голос
/ 14 апреля 2019

Полный код здесь: https://plnkr.co/edit/6TTLVcsXLV7C1qXSMQV0?p=preview

У меня здесь угловой аккордеон с пользовательским интерфейсом (каждая повторяющаяся панель имеет вложенный аккордеон): 

<uib-accordion close-others="oneAtATime">
    <div ng-repeat="sub in subdivisions">
      <div uib-accordion-group  id="accordion" is-open="status.open"
           class="outercontent" ng-repeat="prov in sub.province"
           heading="{{prov.name}}">

        <!-- INNER ACCORDION -->
        <uib-accordion close-others="oneAtATime">
          <div uib-accordion-group  id="inner-accordion" class="innercontent"
               ng-repeat="dist in sub.district" heading="{{dist.name}}" >
            <!-- ul of communes -->
          </div>  
        </uib-accordion>

      </div>
    </div>
  </uib-accordion>

И у меня есть набор ссылоквокруг элементов svg здесь: 

<svg height="300" width="425" id="svg"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">

      <g id="adrargroup" >  
        <a ng-click="clickOuter($event);" class="svgcircle big"><circle cx="50" cy="50" r="40" id="adrarouter" class="circle"/></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="adrarinner"><circle cx="50" cy="100" r="10" /></a>
          <a ng-click="click($event)" class="svgcircle small" id="boudainner"><circle cx="50" cy="150" r="10" /></a>
          <a ng-click="click($event)" class="svgcircle small" id="ouledahmedtimmiinner"> <circle cx="50" cy="200" r="10" /></a>
      </g>
      <g id="algiersgroup" > 
        <a ng-click="clickOuter($event)" class="svgcircle big"><circle cx="150" cy="50" r="40" id="algiersouter" class="circle"/></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="babelouedinner"><circle cx="150" cy="100" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="barakiinner"><circle cx="150" cy="150" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="birmouradraisinner"><circle cx="150" cy="200" r="10" /></a>
      </g>
      <g id="aindeflagroup" > 
        <a ng-click="clickOuter($event)" class="svgcircle big" ><circle cx="250" cy="50" r="40" class="circle" id="aindeflaouter" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="aindeflainner"><circle cx="250" cy="100" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="ainlechiakhinner"><circle cx="250" cy="150" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="bathiainner"><circle cx="250" cy="200" r="10" /></a>
      </g>
      <g id="chlefgroup" > 
        <a ng-click="clickOuter($event)" class="svgcircle big" ><circle cx="350" cy="50" r="40" id="chlefouter" class="circle"/></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="abouelhassaninner"><circle cx="350" cy="100" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="ainmeraneinner"><circle cx="350" cy="150" r="10" /></a>
          <a ng-click="clickInner($event)" class="svgcircle small" id="benihaouainner"><circle cx="350" cy="200" r="10" /></a>
      </g>

</svg>

То, чего я пытаюсь достичь, это то, что при нажатии на каждую ссылку открывается соответствующий div целевой ссылки в аккордеоне.

Я пытался сделать это с помощьюактивация этой функции при нажатии: 

$scope.clickOuter = function(e) {

    var targetcircle = e.target;

    for(i=0; i<circle.length; i++) {
      circle[i].classList.remove("fff-onfocus");
    }
    targetcircle.classList.toggle("fff-onfocus");

    var targetcontent = document.querySelectorAll('.' + targetcircle.getAttribute("id")); 
    targetcontent = Array.prototype.slice.call(targetcontent);  

    for(i=0; i<targetcontent.length; i++) {
      targetcontent[i].setAttribute("is-open", "!status.open");
    }

};

Эта часть функции: 

var targetcontent = document.querySelectorAll('.' + targetcircle.getAttribute("id")); 
targetcontent = Array.prototype.slice.call(targetcontent);  

for(i=0; i<targetcontent.length; i++) {
  targetcontent[i].setAttribute("is-open", "!status.open");
}

Получает идентификатор целевого круга и получает соответствующий div.Затем он изменяет значение атрибута is-open (значение по умолчанию = false) на !status.open (true).Однако, это не работает полностью, когда я проверяю это.Я нажимаю на ссылку, она возвращает соответствующий div и изменяет значение атрибута is-open, но никакие div в аккордеоне фактически не открываются и не закрываются.

(в этом примере https://plnkr.co/edit/M6ZjYSlzgmDQYXFzOurD?p=preview plunker последнийпанель можно переключать, делая status.open true)

Моя вторая проблема заключается в том, что эта часть: 

for(i=0; i<circle.length; i++) {
      circle[i].classList.remove("fff-onfocus");
    }
    targetcircle.classList.toggle("fff-onfocus");

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

Итак, 2 проблемы:

  1. целевой div не переключается открывать / закрывать при нажатии на соответствующую ссылку / круг.
  2. класс fff-onfocus не переключается.

Любая помощь будет принята с благодарностью.Спасибо.

Редактировать Пробовал это и все еще не работает: 

$scope.state = {};
$scope.state.isclosed = false;
$scope.state.isopen = true;

атрибут div: is-open="state.isclosed", внутренняя функция: targetcontent[i].setAttribute("is-open", "state.isopen");

1 Ответ

1 голос
/ 15 апреля 2019

Это заняло некоторое время, но я смог заставить его работать с AngularJS, а не с взломом, который вы пытались (^ _ ^)

Взгляните на этот планер 

    <svg height="300" width="425" id="svg"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink">

      <g id="adrargroup-{{$index}}" ng-repeat="sub in subdivisions">
        <a ng-click="clickOuter(prov);" ng-repeat="prov in sub.province" class="svgcircle big">
          <circle ng-attr-cx="{{prov.cx}}" ng-attr-cy="{{prov.cy}}" r="40" class="circle"/>
        </a>
          <a ng-repeat="dist in sub.district" ng-click="clickInner(dist)" class="svgcircle small" >
            <circle  ng-attr-cx="{{dist.cx}}" ng-attr-cy="{{dist.cy}}" r="10" class="circle"/>
          </a>
      </g>
  </svg>

Я изменил $scope.subdivisions, как показано ниже: 

{
    province: [{
        name: 'Adrar',
        namealt: 'adrarouter',
        population: '123',
        open: false,
        cx: 50,
        cy: 50
    }],
    district: [{
            name: 'Adrar',
            namealt: 'adrarinner',
            population: '1234',
            open: false,
            cx: 50,
            cy: 100
        },
        {
            name: 'Bouda',
            namealt: 'boudainner',
            population: '1234',
            open: false,
            cx: 50,
            cy: 150
        },
        {
            name: 'Ouled Ahmed Timmi',
            namealt: 'ouledahmedtimmiinner',
            population: '1234',
            open: false,
            cx: 50,
            cy: 200
        }
    ]
}

Что нужно сделать дальше:

  1. Напишите функцию, которая присваивает значения open, cx и cy каждому объекту
  2. Вам необходимо улучшить приведенную ниже логику, чтобы вместить массив province, а не так, как я это сделал, как быстрое исправление $scope.subdivisions[index].province[0]
    $scope.clickOuter = function(e) {
        var index = $scope.subdivisions.findIndex(function(obj){
          return obj.province[0].name === e.name;
        })
        $scope.subdivisions[index].province[0].open = !$scope.subdivisions[index].province[0].open;
    };
  1. Написать аналогичную логику в $scope.clickInner = function(e) {};
...