1
J'essaie de créer un exemple d'application en utilisant angularJS à partir de JSON. J'ai créé une structure arborescente qui peut être développée en cliquant sur, et elle montre les nœuds enfants correspondants. De même, il masque les nœuds enfants, lors de l'effondrement en utilisant à nouveau le clic.Masquer la barre de sélection sur parent lorsque l'enfant est développé en utilisant angularJS
Chaque fois, j'affiche une barre de sélection en bleu, pour indiquer le noeud développé. Chaque fois qu'un noeud enfant est développé, le noeud de sélection sur le noeud parent doit être masqué. Cela fonctionne bien, sauf si j'ai 2 nœuds enfants pour le même parent développé. Par exemple, lorsque je développe des nœuds enfants 'A' & 'B' sous le nœud 'ABC', la barre de sélection sur 'ABC' apparaît également, ce qui est incorrect. Idéalement, il devrait être visible uniquement sur les nœuds enfants - 'A &' B '. Cela fonctionne très bien lorsque je n'ai que des nœuds enfants '1' ou '3' étendus. Je suppose qu'il y a quelque chose de mal à basculer 'obj.grandChild =! Obj.grandChild; dans le HTML.
Pourriez-vous s'il vous plaît m'aider à résoudre ce problème?
Voici le code:
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.webs = [{
'pageTitle': 'ABC',
'pageUrl': 'http://www.example.net',
'childPage': [{
'subPageTitle': 'A',
'subPageUrl': 'http://www.example.net',
'grandChild': [{
'grandChildPageTitle': 'one',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'two',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'three',
'grandChildPageUrl': 'http://www.example.net'
}]
}, {
'subPageTitle': 'B',
'subPageUrl': 'http://www.example.net',
'grandChild': [{
'grandChildPageTitle': 'four',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'five',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'six',
'grandChildPageUrl': 'http://www.example.net'
}]
}, {
'subPageTitle': 'C',
'subPageUrl': 'http://www.example.net',
'grandChild': [{
'grandChildPageTitle': 'seven',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'eight',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'nine',
'grandChildPageUrl': 'http://www.example.net'
}]
}]
}, {
'pageTitle': 'DEF',
'pageUrl': 'http://www.example.net',
'childPage': [{
'subPageTitle': 'D',
'subPageUrl': 'http://www.example.net',
'grandChild': [{
'grandChildPageTitle': 'ten',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'eleven',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'twelve',
'grandChildPageUrl': 'http://www.example.net'
}]
}, {
'subPageTitle': 'E',
'subPageUrl': 'http://www.example.net',
'grandChild': [{
'grandChildPageTitle': 'thirteen',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'fourteen',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'fifteen',
'grandChildPageUrl': 'http://www.example.net'
}]
}, {
'subPageTitle': 'F',
'subPageUrl': 'http://www.example.net',
'grandChild': [{
'grandChildPageTitle': 'sixteen',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'seventeen',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'eighteen',
'grandChildPageUrl': 'http://www.example.net'
}]
}]
}, {
'pageTitle': 'GHI',
'pageUrl': 'http://www.example.net',
'childPage': [{
'subPageTitle': 'G',
'subPageUrl': 'http://www.example.net',
'grandChild': [{
'grandChildPageTitle': 'nineteen',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'twenty',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'twnety one',
'grandChildPageUrl': 'http://www.example.net'
}]
}, {
'subPageTitle': 'H',
'subPageUrl': 'http://www.example.net',
'grandChild': [{
'grandChildPageTitle': 'twentytwo',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'twentythree',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'twentyfour',
'grandChildPageUrl': 'http://www.example.net'
}]
}, {
'subPageTitle': 'I',
'subPageUrl': 'http://www.example.net',
'grandChild': [{
'grandChildPageTitle': 'twentyfive',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'twentysix',
'grandChildPageUrl': 'http://www.example.net'
}, {
'grandChildPageTitle': 'twentyseven',
'grandChildPageUrl': 'http://www.example.net'
}]
}]
}];
}]);.main-link {
font-weight: bold;
}
.showChild {
position: relative;
left: 0;
float: left;
margin-right: 10px;
top: 3px;
color: grey;
font-size: 1.3em;
}
.showGrandChild {
position: relative;
left: 0;
float: left;
margin-right: 10px;
top: 7px;
color: red;
font-size: 0.75em;
}
.parentBar {
display: inline-block;
height: 15px;
width: 2px;
background-color: blue;
position: relative;
left: -45px;
top: 4px;
float: left;
}
.childBar {
display: inline-block;
height: 15px;
width: 2px;
background-color: blue;
position: relative;
left: -18px;
bottom: 156px;
float: left;
}
ul {
list-style: none;
}
li {
margin: 20px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="obj in webs">
\t <ul ng-init="obj.showChild = false;" ng-click="obj.showChild = !obj.showChild;">
\t <li>
\t \t <a ng-href="{{obj.pageUrl}}" class="main-link">{{obj.pageTitle}}</a>
\t \t <i class="fa fa-arrow-down showChild" aria-hidden="true"></i>
\t \t <span class="parentBar" ng-if="obj.showChild === true && obj.grandChild === false"></span> \t
\t </li> \t \t \t \t
\t </ul>
\t <ul ng-init="child.showGrandChild = false; obj.grandChild = false;" ng-show="obj.showChild">
\t <li ng-repeat="child in obj.childPage" ng-click="child.showGrandChild = !child.showGrandChild; obj.grandChild = !obj.grandChild;">
\t \t <a ng-href="{{child.subPageUrl}}">{{child.subPageTitle}}</a>
\t \t <i class="fa fa-arrow-down showGrandChild" aria-hidden="true"></i>
\t \t <ul ng-show="child.showGrandChild">
\t \t <li ng-repeat="grandChild in child.grandChild">
\t \t \t <a ng-href="{{grandChild.grandChildPageUrl}}">{{grandChild.grandChildPageTitle}}</a>
\t \t </li>
\t \t </ul>
\t \t <span class="childBar" ng-if="child.showGrandChild === true"></span>
\t </li> \t \t \t \t \t \t
\t </ul> \t
</div>
</div>
Parfait! Merci beaucoup :) – Sunny