【发布时间】：2018-02-18 00:55:00
【问题描述】：
我正在尝试使用 JSON 格式的 angularJS 创建示例应用程序。 我创建了一个树状结构，可以在单击时展开，并显示相应的子节点。同样，它隐藏子节点，再次点击折叠。
每次，我都会以蓝色显示一个选择栏，以指示展开的节点。 每当展开子节点时，应隐藏父节点上的选择节点。它工作正常，除非我为同一个父节点扩展了 2 个子节点。
例如，当我在节点'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">
<ul ng-init="obj.showChild = false;" ng-click="obj.showChild = !obj.showChild;">
<li>
<a ng-href="{{obj.pageUrl}}" class="main-link">{{obj.pageTitle}}</a>
<i class="fa fa-arrow-down showChild" aria-hidden="true"></i>
<span class="parentBar" ng-if="obj.showChild === true && obj.grandChild === false"></span>
</li>
</ul>
<ul ng-init="child.showGrandChild = false; obj.grandChild = false;" ng-show="obj.showChild">
<li ng-repeat="child in obj.childPage" ng-click="child.showGrandChild = !child.showGrandChild; obj.grandChild = !obj.grandChild;">
<a ng-href="{{child.subPageUrl}}">{{child.subPageTitle}}</a>
<i class="fa fa-arrow-down showGrandChild" aria-hidden="true"></i>
<ul ng-show="child.showGrandChild">
<li ng-repeat="grandChild in child.grandChild">
<a ng-href="{{grandChild.grandChildPageUrl}}">{{grandChild.grandChildPageTitle}}</a>
</li>
</ul>
<span class="childBar" ng-if="child.showGrandChild === true"></span>
</li>
</ul>
</div>
</div>【问题讨论】：
标签： angularjs toggle angularjs-ng-click expand angular-ng-if