1
我正嘗試使用angularJS創建一個示例應用程序，使用JSON。 我創建了一個類似樹的結構，可以在點擊時展開，並顯示相應的子節點。類似地，它在隱藏子節點時再次使用點擊進行摺疊。使用angularJS展開子項時隱藏父級上的選擇欄
每次我都會以藍色顯示一個選擇欄，以指示展開的節點。 每當展開一個子節點時，父節點上的選擇節點應該被隱藏。它工作正常，除非我有兩個孩子節點的同一父母展開。
例如，當在節點'ABC'下展開子節點'A'&'B'時，'ABC'上的選擇欄也出現，這是不正確的。理想情況下，應該只在子節點上看到 - 'A &'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