Question

我尝试使用JSON中的angularJS创建示例应用程序。我创建了一个树状结构，可以在点击时展开，并显示相应的子节点。类似地，它会隐藏子节点，再次使用点击进行折叠。

每次，我都会以蓝色显示选择栏，以指示展开的节点。无论何时扩展子节点，都应隐藏父节点上的选择节点。它工作正常，除非我为同一个父节点扩展了2个子节点。

例如，当Iexpand子节点＆＃39; A＆＃39; ＆安培; ＆＃39; B＆＃39;在节点＆＃39; ABC＆＃39;下，选择栏上的＆＃39; ABC＆＃39;也出现了，这是不正确的。理想情况下，它应该仅在子节点上看到 - ＆＃39; A＆amp; ＆＃39; B＆＃39;

当我只有＆＃39; 1＆＃39;或者＆＃39; 3＆＃39;子节点扩展。我猜切换＆＃39; obj.grandChild =！obj.grandChild有问题;在HTML中。

你可以帮我解决这个问题吗？

以下是代码：

＆＃13;

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'
    }]
   }]
  }];
}]);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我认为这就是你想要的。你是对的，混淆是obj.grandChild === false检查。当您切换下一个grandChild时，会将其设置回false，以便显示Parent的行。

我添加了一个名为isChildrenShowing的函数，如果任何子项显示其grandChildren，它将迭代并返回true。关于some的MDN文档。

$scope.isChildrenShowing = function(children) {
    return children.some(function(child) {
        return child.showGrandChild === true;
    });
}

这意味着不再需要obj.grandChild。

＆＃13;

angular.module('myApp', [])
 .controller('myCtrl', ['$scope', function($scope) {
  $scope.isChildrenShowing = function(children) {
    return children.some(function(child) {
      return child.showGrandChild === true;
    });
  }
 
  $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'
    }]
   }]
  }];
}]);

＆＃13;

.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;
}

＆＃13;

<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 && isChildrenShowing(obj.childPage) === false"></span>	
	  </li>				  
	</ul>
	<ul ng-init="child.showGrandChild = false" ng-show="obj.showChild">
	  <li ng-repeat="child in obj.childPage" ng-click="child.showGrandChild = !child.showGrandChild">
		<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>

＆＃13;

使用angularJS扩展子项时隐藏父项上的选择栏

1 个答案: