1
JSON에서 angularJS를 사용하여 샘플 응용 프로그램을 만들려고합니다. 클릭 할 때 확장 할 수있는 구조와 같은 트리를 만들었으며 해당하는 자식 노드를 보여줍니다. 비슷하게, 클릭을 다시 사용하여 접을 때 자식 노드를 숨 깁니다.child가 angularJS를 사용하여 확장 될 때 부모의 선택 막대를 숨기기
매번 확장 된 노드를 나타 내기 위해 선택 표시 줄이 파란색으로 표시됩니다. 자식 노드가 확장 될 때마다 부모 노드의 선택 노드를 숨겨야합니다. 같은 부모를위한 2 개의 자식 노드를 확장하지 않았다면 괜찮습니다.
예를 들어 노드 'ABC'아래에 Iexpand 하위 노드 'A'& 'B'가있는 경우 'ABC'의 선택 막대도 나타나며 올바르지 않습니다. 이상적으로는 자식 노드에서만 볼 수 있어야합니다 ('&'B ').
'1'또는 '3'자식 노드 만 확장 한 경우 제대로 작동합니다. 'obj.grandChild =! obj.grandChild;를 토글하는 데 문제가있는 것 같습니다. HTML에서.
해결해 주시겠습니까? 나는 이것이 당신이 원하는 무엇을 생각
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>
딱! 엄청 고마워 :) – Sunny